码迷,mamicode.com
首页 > Web开发 > 详细

CSS效果小结

时间:2018-05-21 00:00:27      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:border   属性   效果   文本   ext   inf   删掉   ado   box   

效果属性

1.box-shadom(盒子阴影)

技术分享图片

示例

技术分享图片技术分享图片

加上 box-shadom

技术分享图片技术分享图片

内阴影

技术分享图片技术分享图片

复杂例子

技术分享图片技术分享图片

阴影的形状跟原来的形状是一样的

 技术分享图片技术分享图片

结果:

技术分享图片

box-shadow 作用:1.营造层次感(立体感)2.充当没有宽度的边框(没有大小,不会占据位置)3.特殊效果

 

2.text-shadom(文本阴影)

作用:1.立体感  2.印刷品质感(边缘有模糊效果)

技术分享图片

比较:

技术分享图片

技术分享图片

技术分享图片

技术分享图片

3.border-radius

圆角矩形

技术分享图片技术分享图片

圆形

技术分享图片技术分享图片

半圆/扇形

技术分享图片技术分享图片

只有左上角,其余均为 0,若删掉 border 属性,则为扇形

技术分享图片

椭圆

技术分享图片

10px 和 20px 分别为 x轴 和 Y轴 的半径,设置椭圆

4.background

 

5.clip-path

CSS效果小结

标签:border   属性   效果   文本   ext   inf   删掉   ado   box   

原文地址:https://www.cnblogs.com/jianghao233/p/9065169.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!