您现在的地位: 365体育备用网址 > bet365体育在线, > CSS3教程 > CSS3 边框

CSS3 边框_365体育备用网址官网资讯

您现在的地位: 365体育备用网址 > bet365体育在线, > CSS3教程 > CSS3 边框

CSS3 边框

此节有 151 人学习过     参与评论

CSS3 边框

通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用波音娱乐城 平台来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。

在本章中,您将学到以下边框属性:

  • border-radius
  • box-shadow
  • border-image

扫瞄器撑腰

属性 扫瞄器撑腰
border-radius          
box-shadow          
border-image          

Internet Explorer 9+ 撑腰 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 撑腰一切新的边框属性。

注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 撑腰 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。

CSS3 圆角边框

在 CSS2 中添加圆角矩形需要技术。我们必须为每个圆角使用不同的波音娱乐城 平台。

在 CSS3 中,创建圆角是非常容易的。

在 CSS3 中,border-radius 属性用于创建圆角:

这个矩形有圆角哦!

实例

向 div 元素添加圆角:

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

亲自试一试

CSS3 边框阴影

在 CSS3 中,box-shadow 用于向方框添加阴影:

 

实例

向 div 元素添加方框阴影:

div
{
box-shadow: 10px 10px 5px #888888;
}

亲自试一试

CSS3 边框波音娱乐城 平台

通过 CSS3 的 border-image 属性,您能够使用波音娱乐城 平台来创建边框:

border-image 属性同意您规定用于边框的波音娱乐城 平台!

用于创建上面的边框的原始波音娱乐城 平台:

用于边框的波音娱乐城 平台

实例

使用波音娱乐城 平台创建围绕 div 元素的边框:

div
{
border-image:url(/XjLqE0bDWjpXREqpBOfW.jpg) 30 30 round;
-moz-border-image:url(/XjLqE0bDWjpXREqpBOfW.jpg) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(/XjLqE0bDWjpXREqpBOfW.jpg) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(/XjLqE0bDWjpXREqpBOfW.jpg) 30 30 round; /* Opera */
}

亲自试一试

新的边框属性

属性 描述 CSS
border-image 设置一切 border-image-* 属性的简写属性。 3
border-radius 设置一切四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影。 3

如对本文有疑问,请提交到交流尊尚会 娱乐,广大热心网友会为你解答!! 点击进入尊尚会 娱乐


公布评论 (151人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换波音娱乐城 平台
最新评论
------分隔线----------------------------
条评论
Sitemap