CSS3 边框

原创 2016年05月31日 21:38:45

学习要点:

  • 圆角 border-radius
  • 盒阴影 box-shadow
  • 边界图片 border-image

1.圆角 border-radius

<div>border-radius 属性允许您为元素添加圆角边框! </div>

div {
    width: 200px;
    height: 100px;
    padding:20px;
    border: 1px solid red;
    border-radius : 25px;   
}

2.盒阴影 box-shadow

<div></div>

div {
    width: 200px;
    height: 100px;
    background: red;
    /*x轴偏移量 y轴偏移量 模糊程度 阴影颜色*/
    box-shadow: 10px 10px 5px #000;
}

3.边界图片 border-image
html部分

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里,图像平铺(重复)来填充该区域。</div>
<br>
<div id="stretch">这里,图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材:</p>
<img src="images/border.png" />

css部分


div {
    width: 250px;
    padding: 10px 20px;
    border: 15px solid translate;
}
#round {
    /*safari*/
    /*图片源 图片边界向内偏移量 图片的宽度 用于指定在边框外部绘制 border-image-area 的量  样式*/
    -webkit-border-image : url(../images/border.png) 30 30 round;
    /*opera*/
    -o-border-image : url(../images/border.png) 30 30 round;
    border-image : url(../images/border.png) 30 30 round;
}

#stretch {
    -webkit-border-image : url(../images/border.png) 30 30 stretch;
    -o-border-image : url(../images/border.png) 30 30 stretch;
    border-image : url(../images/border.png) 30 30 stretch;
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

css3边框线性出现特效

  • 2017年01月19日 14:18
  • 1KB
  • 下载

利用css3伪类实现边框环绕效果

利用css3伪类实现边框环绕效果
  • Cocoos
  • Cocoos
  • 2016年01月10日 16:04
  • 380

一个发光的搜索边框(纯CSS3)

  • 2014年08月22日 14:26
  • 2KB
  • 下载

CSS3之边框圆角:border-radius

学习自《论道HTML5》 边框的圆角border-radius是CSS3最常用的属性之一,有了这个属性我们以后不再需要图片资源来实现边框圆角,它的格式如下: [长度 或 百分比] {1,4}[ /...

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...

CSS3 创建圆角边框及矩形添加阴影

一、nth-of-type(n) 第N个子元素 二、border-radius 圆角 三、box-shadow 阴影 index.html页面 ...

07、CSS3新增边框属性

CSS边框属性复习 border: 宽度 类型 颜色 小数不支持 border-width:边框的宽度 thin 细的 medium 默认的 thick 粗的 ...

css3的background-clip来制作半透明边框

弹出框的html代码如下: div class="search-popup-window advise" id="lightbox">   img src="style/image...

2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天

CSS3今日课程预览 1. CSS3 的选择器1.1 子选择器例如:设置div下一级的p标签的颜色属性div>p { background-color:yellow; } 1.2 相邻兄弟选择器解...
  • MR_LP
  • MR_LP
  • 2016年03月16日 19:39
  • 1770
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3 边框
举报原因:
原因补充:

(最多只允许输入30个字)