demo_01 css3中的radius
css属性：border-radius ；border：边框；radius：弧度；所以这个属性的意思很明了。
下面实现一个小demo：
<!doctype html>
<html>
<head>
<title>这里是标题的内容</title>
<meta charset="utf-8"/><!--定义浏览器解析的方式-->
<style rel="stylesheet" type="text/css">
#box{
width:200px;
height:200px;
border-radius:100px;
background:red;
}
</style>
</head>
<body>
<div id="box">实现一个圆形</div>
</body>
</html>
===================================================================
用css属性去除导航栏多余的边框，示例：
<!doctype html>
<html>
<head>
<title>这里是标题的内容</title>
<meta charset="utf-8"/><!--定义浏览器解析的方式-->
<style rel="stylesheet" type="text/css">
ul{
list-style:none;
}
li{
width:50px;
height:20px;
border-right:1px solid red;
background:blue;
}
li:last-child{
border:none;
}
</style>
</head>
<body>
<ul>
<li>导航栏内容</li>
<li>导航栏内容</li>
<li>导航栏内容</li>
<li>导航栏内容</li>
</ul>
</body>
</html>
demo_01 css3中的radius的更多相关文章
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover
img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- CSS3中毛玻璃效果的使用方法
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...
随机推荐
- (DP6.1.2.1)UVA 147 Dollars(子集和问题)
/* * UVA_147.cpp * * Created on: 2013年10月12日 * Author: Administrator */ #include <iostream> #i ...
- c# label的内容显示不全
c# label的内容显示不全.须要设置例如以下属性就可以: 1.将Lable的font属性的字体改成宋体: 2.将AutoSize属性改成true: 然后内容就能够显示所有了.
- 【异构计算】OpenCL矩阵转置
介绍 矩阵转置,主要的技巧还是利用好local memory ,防止local memory,以及glabol memory的读取尽量是合并读写. 完整代码一: main.cpp代码 #include ...
- 正则化方法 exec 和match以及test
var patt=new RegExp(/\d+/g); var str="dfgdfg5465yhhgh65y65hh41"; var result; // var reset= ...
- 取得root权限后怎么删除程序
不知道这个算什么教程,随便一个分类吧,管理员不要扣我分啊,我也是为大家服务嘛,不对的话可以帮我处理下) 最近也学习了下,把我的X8(国行2.1版)给root了,怎么root,论坛里有很多帖子,这里就不 ...
- Apache的RewriteRule规则详细介绍
R[=code](force redirect) 强制外部重定向 (rkyW z强制在替代字符串加上http://thishost[:thisport]/前缀重定向到外部的URL.如果code不指定, ...
- java 过滤器Filter中chain.doFilter()之前和之后代码的执行顺序
过滤器拦截到响应url的请求后会先执行doFilter()方法中chain.doFilter()之前的代码,然后执行下一个过滤器或者servelt.紧接着执行chain.doFilter()之后的代码 ...
- [Laravel]配置路由小记
Laravel:4.2 使用的后台是:laravel-backend php artisan routes 使用这个代码,可以看到显示目前项目的路由器 ,我需要添加功能,我就需要添加路由 /* |-- ...
- MySQL之select查询、function函数
一.select查询 //查询某张表所有数据 select * from temp; //查询指定列和条件的数据 //查询name和age这两列,age等于22的数据 ; //as对列重命名 //as ...
- Bootstrap--组件之Glyphicons字体图标
Glyphicons 字体图标 所有可用的图标 包括250多个来自 Glyphicon Halflings 的字体图标.Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bo ...