当前位置:Gxlcms > html代码 > 你可能不知道的css_html/css_WEB-ITnose

你可能不知道的css_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:7人阅读

最近在学习《css揭秘》这本书,作者是w3c工作组的特邀专家,设计css语言的委员之一。这本书实现了很多常见的、我们在写网页的时候不好实现的效果。阅读这本书,经常感叹“原来还可以这样”!让我们一起来学习一些效果吧!

书里提到编写可维护的css最大要素是尽量减少改动时要编辑的地方 比如一个按钮,我们可能写一堆font-size,line-height,padding的像素值,如果按钮需要放大,这些值都需要修改,如果用em做单位,可能改动的地方就小了

1.半透明边框 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的:border: 10px solid rgba(#255,#255,#255,.5);background: white; 但是我们会发现完全不透明!! 我们可以使用css3的background-clip来实现我们想要的效果

 width: 50px; height: 50px; background-color: white; border: 10px dotted rgba(#255,#255,#255,.5); background-clip: padding-box;

我们把border设成dotted 可以看到这样的效果

半透明背景

background-clip是背景的范围,默认是border-box,我们把它设成padding-box,背景会沿着内边距被切掉。

2.多重边框

如果我们要给元素包多层边框,常常要加很多层标签,这样会污染我们的结构,我们可以思考其他的方案

  • box-shadow方案
    background: yellowgreen;box-shadow: 0 0 0 10px #655,                    0 0 0 15px deeppink;

box-shadow方案

  • outline方案大多数情况下,你可能只需要两层边框,outline可以使用虚线,outline-offset可以使用负值,实现缝边效果。
    background: yellowgreen;border: 10px solid #655;outline: 1px dashed #fff;outline-offset: -5px;

outline方案

不过,outline边框不一定会贴合 border-radius 属性产生的圆角,且只适用于双层边框的场景

3.灵活的背景定位如果我们想让背景在容器的右下方,我们可能会用background-position:right bottom; 如果想让背景距离右下角宽高各20px呢?你知道怎么办吗?css3扩展了background-position属性,可以写background-position:right 20px bottom 20px;或者直接指定padding,然后background-origin: content-box;background-origin是css3新增的属性,默认是padding-box,指定了背景的位置。

灵活的背景定位

以上例子多是css3的属性,可能有兼容性问题,不过为我们提供了好的思路,也可以写回退方案。书里精彩的内容更多,大家也去看看吧!

人气教程排行