简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

CSS3之尖角标签_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:48:52
original
1360 Les gens l'ont consulté

如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性).

运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式.

<p>    <a>Tag1</a>    <a>Tag2</a>    <a>Tag3</a>    <a>Tag4</a></p>
Copier après la connexion

css主要利用伪元素来实现尖角

a{    dispaly:inline-block;    position:relative;    background:#ccc;    color:green;    line-height:1em;    margin:0 10px;    padding:3px;}a:before{    position:absolute;    content:"";    width:0;    height:0;    border:transparent 0.74em solid;    border-right-color:#ccc;    top:0;    left:-1.4em    }
Copier après la connexion

利用伪元素实现的尖角基于整个a标签绝对定位显示在左侧,注意行高和定位都是用的em单位.

简单实现效果看截图:

 

Étiquettes associées：
CSS3之尖角标签
source：php.cn
Article précédent：说一个Sublime Text 2插件、emmet（原名：zen Coding)_html/css_WEB-ITnose Article suivant：基于CSS3 3D百叶窗图像过渡特效_html/css_WEB-ITnose
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
Derniers articles par auteur
Derniers numéros
css3中的 :hover只能应用于a标签不能用于其它标签吗（比如div或li之类的标签） css3中的 :hover只能应用于a标签不能用于其它标签吗（比如div或li之类的标签）？
Depuis 2017-04-17 11:35:07
0
5
835
PHP自动生成了很多全角空白影响页面布局，怎么回事？ 公司开发了一套程序，在内部的 Linux 服务器上使用时是成功的，但是上传到远程 Linux 主机上时，输出的页面里面出现了很多全角空格，用火狐的 Firebug 看的时候，就是两...
Depuis 2017-04-10 14:23:02
0
1
193
有否PHP实现的自动生成CSS3兼容性前缀？ CSS3有很多好用的新属性，比如圆角、阴影、动画等，但是这些属性在不同浏览器中都是通过-moz-、-webkit-等的私有标签进行支持的。因此需要跨浏览器实现的时候，必须一条属性分...
Depuis 2016-11-08 09:39:51
0
1
670
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
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！