CSS3(1)边框和背景
2019-01-14 本文已影响1人
RachelCT
今天看到介绍说css3被拆分为模块,最重要的模块有如下:选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。接下来就从这几个模块进行一些梳理。
这篇先整理css3背景和边框。css3中背景和边框的属性主要有如下:
![](https://img.haomeiwen.com/i5867790/614f7b56fb0e2431.png)
background-image指定背景图片;background-size指定背景图片的大小;background-origin和background-clip分别有三个属性值,后者指定背景图的填充的位置是只填充content区域还是填充到border或是padding位置,前者定位图片显示的位置是在哪个区域。
背景区域示意图如下:
![](https://img.haomeiwen.com/i5867790/ef8694eb3c1001d4.png)
举个栗子:若background-clip:border-box,则背景图从border-box的位置开始显示,想象背景图比较小,而border-box区域比较大,则背景图只是显示在上个区域划分示意图中左上角的位置。
下面上个热腾腾地例子帮助理解,注意看 background-clip的值:
/*css*/
.pstyle{
background-image: url("b_image.jpg");
background-size: 1200px 500px;
padding: 10px;
border: dotted 5px;
background-clip: content-box;
font-size: 25px;
}
/*html*/
<p class="pstyle">于千万人之中遇见你所要遇见的人,于千万年之中,时间的无涯的荒野里,
没有早一步,也没有晚一步,刚巧赶上了,那也没有别的话可说,惟有轻
轻 地问一声:“噢,你也在这里吗?”
</p>
效果图:
![](https://img.haomeiwen.com/i5867790/8a3de8b3ef44ade9.png)
当background-clip: border-box;时:
![](https://img.haomeiwen.com/i5867790/639637bcb77fe4ce.png)
当background-clip: padding-box;时:
![](https://img.haomeiwen.com/i5867790/61b0abd2d1f3addc.png)
(上面属于一起来找茬的内容,看到变化了吗?哈哈哈)注意看背景图边缘的变化。
对于边框属性不再赘述,border-radius设置边框的弧度,如在上面的css样式中添加border-radius:15%;效果如下:
![](https://img.haomeiwen.com/i5867790/224f015f4313eb82.png)
border-shadow设置边框阴影区域的大小,border-image设置边框图案。
学习过程中的一些笔记总结若有不当之处,感谢指出。愿自己在学习路上越走越远。