css3圆角边框和边框黑影示例

日期：2021-01-20 类型：科技新闻 

关键词：建站平台有哪些，如何建设网站，免费自助建站，如何建立一个网站，网站建站的

border-radius向元素加上圆角边框，css3中的。IE9+ chrome safari5+ firefox4+ 如今都适用。能够向input div等设定边框。与border类似，能够4个角1起设定，还可以独立设定。

英语的语法：

拷贝编码
编码以下:

border-radius: 1⑷ length|% / 1⑷ 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向框加上1个或好几个黑影。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;

上一篇：css与html普遍的3种融合方法示例详细介绍 返回下一篇：没有了