css3圆角边框和边框阴影示例
发布时间:2014-05-05 15:44:58 作者:佚名 我要评论
这篇文章主要介绍了css3圆角边框和边框阴影示例,需要的朋友可以参考下
border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。
语法:
复制代码
代码如下:border-radius: 1-4 length|% / 1-4 length|%;
-moz-border-radius:10px;支持旧的firefox
-webkit-border-radius:10px;支持chrome
按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
例子1:
复制代码
代码如下:border-radius:2px;
等价于:
复制代码
代码如下:border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
例子2:
复制代码
代码如下:border-radius:2em 1em 4em / 0.5em 3em;
等价于:
复制代码
代码如下:border-top-left-radius:2em 0.5;
border-top-right-radius:1em 3em;
border-bottom-right-radius:4em 0.5em;
border-bottom-left-radius:1em 3em;
box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
语法:
复制代码
代码如下:box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow,v-shadow必须。水平,垂直阴影的位置。允许赋值。blur可选,模糊距离。spread可选,阴影的尺寸。color可选,阴影的颜色。inset可选,将外部阴影(outset)改为内部阴影。
例子:
复制代码
代码如下:box-shadow: inset 3px 3px 6px #ccc;
相关文章
- 这篇文章主要介绍了CSS3使用border-radius属性制作圆角,并附上示例代码,推荐给有相同需求的小伙伴。2014-12-22
IE系列不支持CSS的圆角border-radius等属性的解决方案
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性,如何解决这个问题呢?百度了一下,发现有个开源的插件可以解决此问题2014-09-15- 圆角、阴影、透明的实现方法有很多,之前的获取比较复杂,用CSS3就方便很多了,而且对浏览器的支持性也比较好,下面简单为大家介绍下2014-08-08
- CSS3圆角技术能非常好的美化你的页面效果,而且避免了使用图片辅助,一则省去了制作图片的时间,二则省去了浏览器加载图片造成的延迟和带宽2014-05-07
- css3自定义渐变圆角按钮样式分享,大家参考使用吧2013-12-27
jQuery+css3实现的超酷无图片圆角tab选项卡切换效果
依靠CSS3实现了Tab选项卡标签的圆角效果,无需图片2013-09-10- 无需任何JS代码就可以实现圆角彩色的多功能导航按钮,简洁大方2013-08-26
- 无需任何JS,表单界面豪华靓丽,带有圆角效果,输入框也非常高雅2013-07-24
- 无需任何图片和JS代码,完全通过样式定义即可实现如此漂亮的圆角按钮,每一个按钮都各有特点2013-07-24
- 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天,小编为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性,需要的朋友参考下吧2017-11-09
最新评论