html的css怎么设置深度,深度盘点:20个常用的CSS技巧

e243bd51a66dc0e90af68d8ad8cdd18d.png

1.黑白图像

这段代码会让你的彩色照片显示为黑白照片,是不是很酷?

b3d566873e9910a392912426113ff991.png

2.使用:not()在菜单上应用/取消应用边框

先给每一个菜单项添加边框

fed548fb44bd7e5723ae476474cc15d0.png

……然后再除去***一个元素……

4e16ba00a3a3a447b2b0bbe9a9ef96c8.png

……可以直接使用:not()伪类来应用元素:

70b5738112ce3c71c8c576e4fa2a434e.png

这样代码就干净,易读,易于理解了。

当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):

6018923fde2dc6d35d1cae5d6f6f2d27.png

3.页面顶部阴影

下面这个简单的css3代码片段可以给网页加上漂亮的顶部阴影效果:

7f2d4a664307d564c85e57df19516036.png

4.给body添加行高

你不需要分别添加line-height到每个p,h标记等。只要添加到body即可:

52505b99453d6a9294367b8464b0d3da.png

这样文本元素就可以很容易地从body继承。

5.所有一切都垂直居中

要将所有元素垂直居中,太简单了:

01c052890e0f340672bff02c92dbbc66.png

看,是不是很简单。

注意:在IE11中要小心flexbox。

6.逗号分隔的列表

让html列表项看上去像一个真正的,用逗号分隔的列表:

9a1b7bcb26e595c4225c88a61457434d.png

对***一个列表项使用:not()伪类。

7.使用负的nth-child选择项目

在CSS中使用负的nth-child选择项目1到项目n。

2efc631a4cc45c5fae3c7dd69bb7ca1c.png

8.对图标使用SVG

我们没有理由不对图标使用SVG:

b1b148271e25a4a017f1a4edea039cd8.png

SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

9.优化显示文本

有时,字体并不能在所有设备上都达到***的显示,所以可以让设备浏览器来帮助你:

d13b2284a730b92226d9dca57a8408d8.png

注:请负责任地使用optimizeLegibility。此外,IE/Edge没有text-rendering支持。

10.对纯CSS滑块使用max-height

使用max-height和溢出隐藏来实现只有CSS的滑块:

330429f8d44e21ebba0ed89d726b0a97.png

11.继承box-sizing

让box-sizing继承html:

d9f45c5daa5aa67ff7fb7098cfb52f13.png

这样在插件或杠杆其他行为的其他组件中就能更容易地改变box-sizing了。

12.表格单元格等宽

表格工作起来很麻烦,所以务必尽量使用table-layout:fixed 来保持单元格的等宽:

43bb6437c6e9ecb8d4d4ed406cacd62c.png

13.用Flexbox摆脱外边距的各种hack

当需要用到列分隔符时,通过flexbox的space-between属性,你就可以摆脱nth-,first-,和last-child的hack了:

fd47effdb3f84b5c64135f47cbc5ca2f.png

现在,列表分隔符就会在均匀间隔的位置出现。

14.使用属性选择器用于空链接

当a元素没有文本值,但href属性有链接的时候显示链接:

13b018cab7448051d1ffe63cb2482876.png

相当方便。

15.检测鼠标双击

HTML:

CSS:

4cbb1f9107803a23ec4dded5a7635f90.png

16.CSS 写出三角形

利用border来写三角形代码,并且兼容IE6.

5cacae049d20a23af108b2fed855780a.png

17.CSS3 calc() 的使用

calc()用法类似于函数,能够给元素设置动态的值:

4cf8c6b381236db1aeda6281b6d3f374.png

18.文本渐变

文本渐变效果很流行,使用CSS3能够很简单就实现:

7398c02be148f02c48547e65f743a028.png

19.禁用鼠标事件

CSS3新增的pointer-events让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。

3e249f31ef45133e2c33afaa71caa8bb.png

20.模糊文本

简单但很漂亮的文本模糊效果,简单又好看!

cd74ddb1da9e4f9ce46c61749262d270.png

【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值