时间:2021-05-08
一、边框
box-shadow
box-shadow: h-shadow v-shadow blur spread color inset(ontset);//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影 <br>box-shadow: 5px 0 5px 0 #000 outset;//效果图如下
border-radius 圆角
border-radius: 1-4 length|% / 1-4 length|%;//第一个参数:水平半径 第二个参数:垂直半径border-radius: 50%/20%;//效果图如下通过设置不同的边框圆角可以实现多种多样的边框盒子
border-image
border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat//边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺(repeated)、铺满(rounded)、拉伸(stretched)二、背景
background-size 规定背景图片尺寸
background-clip 规定背景的“绘制”区域
background-clip: border-box|padding-box|content-box;background-origin 规定背景图片的“定位”区域background-origin: padding-box|border-box|content-box;PS:注意background-origin与background-clip的区别,一个是定位区域,一个是绘制区域
三、文本效果
text-shadow 文本阴影效果
text-shadow: h-shadow v-shadow blur color;//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色text-shadow: 5px 5px 3px #000;//效果图如下word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
word-wrap: normal|break-word;//normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行word-break 规定非中日韩文本的换行规则
word-break: normal|break-all|keep-all;// normal:使用浏览器默认换行规则 break-all:允许在单词内换行 keep-all:只能在半角空格或连字符处换行总结
以上所述是小编给大家介绍的css3 边框、背景、文本效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS3PatternsGallery这个CSS3模式库展示了各种使用纯CSS3实现的网页背景效果,可以即时修改代码浏览效果,非常棒!LayerStyles这是
复制代码代码如下:css3实现多背景展示 通过css3定位多张背景并且使用固定属性。
下面以2017年新年祝福语为例给大家展示下效果。纯CSS3实现的鼠标悬停时边框旋转的效果:实现代码如下,代码中注释已经比较详细,就不再多说了:Documentb
之前为大家分享很多纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非
本文介绍了css3实现信纸/同学录效果的示例代码,分享给大家,具体如下:实现思路:网格背景,由css3的线性渐变来实现。纸上的打孔,由圆和圆柱组成,多个打孔,可