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

日期:2020-10-21 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

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;