撸代码

CSS3中的圆角:border-radius

2019-03-08 10:22:11 作者:码工0组

在 CSS3 中,border-radius 属性用于创建圆角。CSS 指层叠样式表 (Cascading Style Sheets)。

CSS3中的圆角:border-radius(图1)


向 div 元素添加圆角:

div
{
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px; /* Old Firefox */
}


<div> 可定义文档中的分区或节(division/section)。class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
举例:
h1 {
    color:red;
    font-size:16px;
}
h1 是选择器,color 和 font-size 是属性,red 和 16px 是值。
.center {
    text-align: center
}
在 CSS 中,类选择器以一个点号显示。

CSS3 @font-face 规则。在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的。


-moz代表firefox浏览器私有属性。-ms代表ie浏览器私有属性。-webkit代表safari、chrome私有属性。这些是为了兼容老版本的写法,比较新版本的浏览器都支持直接写:border-radius。现在比较流行的一个概念就是:不太关键的样式,可以不考虑兼容。比如圆角,并不影响内容的显示,如果客户浏览器太旧,就让他看到旧的方形效果就是,一定要看到新效果,只能建议客户升级浏览器。

CSS3中的圆角:border-radius(图2)