手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css3圆角边框和边框阴影示例
css3圆角边框和边框阴影示例
摘要:border-radius向元素添加圆角边框,css3中的。IE9+chromesafari5+firefox4+现在都支持。可以向inpu...

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圆角边框和边框阴影示例】相关文章:

CSS写的简单表格示例

css中style和class的加载顺序示例介绍

CSS定义DIV圆角边框

CSS table 单行布局示例代码

css 控制鼠标显示样式示例

css3中圆角和阴影的实验

css实现文字层浮在图片之上示例代码

css3教程:弹性盒模型

CSS实现让同一行文字和输入框对齐的方法

CSS3边框-边框颜色(border-color)

精品推荐
分类导航