CSS3 边框实际效果

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

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

甚么是CSS#

CSS(Cascading Style Sheets的缩写),汉语翻译为“堆叠款式表”或“联级款式表”,简称款式表。

CSS的关键功效#

它关键是用来给HTML网页页面来设定外型或款式。外型或款式:HTML网页页面中的文本的尺寸、色调、字体样式,网页页面的情况色调、情况照片。

CSS3 边框

CSS3 边框#

根据 CSS3,您可以建立圆角边框,向矩形框加上黑影,应用照片来绘图边框 - 而且不需应用设计方案手机软件,例如 PhotoShop。

您将学到下列边框特性:border-radius、box-shadow、border-image。

1、圆角边框border-radius#

在 CSS3 中,border-radius 特性用于建立圆角:

1.1、border-radius英语的语法#

基础写法以下:

设定左上角

border-top-left-radius:10px;

设定右上角

border-top-right-radius:10px;

设定左下角

border-bottom-left-radius:10px;

设定左下角

border-bottom-right-radius:10px;

简写设定4个角

实行次序以下: 左上-右上-右下-左下

border-radius:1px 2px 3px 4px;

设定4角值统1

border-radius:10px;

适用百分比

border-radius:100%;

适用em

border-radius:2em;

适用运算

border-radius:30px/30px; /*适用加和除 其余的不适用*/

JavaScript英语的语法

document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2访问器适配性#

-webkit:意味着Webkit枘核访问器,如chrome and safari独享特性或核心鉴别码。

-webkit-border-radius:5px; -moz:意味着Firefox访问器独享特性或核心鉴别码。

-moz-border-radius:5px;

ms意味着ie访问器独享特性或核心鉴别码。

-ms-border-radius: 5px;

-o-意味着欧朋opera访问器独享特性或核心鉴别码。

-o-border-radius: 5px;

IE9+、Firefox 4+、Chrome、Safari 5+和 Opera适用 border-radius 特性。

border-radius:10px;

总结

以上所述是网编给大伙儿详细介绍的CSS3 边框实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!