Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-21 08:45:52
original
1091 Les gens l'ont consulté

最近在学习《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;
Copier après la connexion

我们把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;
    Copier après la connexion

box-shadow方案

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

    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的属性,可能有兼容性问题,不过为我们提供了好的思路,也可以写回退方案。书里精彩的内容更多,大家也去看看吧!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!