css3-文本新增属性

时间:2021-05-29 17:07:48

rgba:a是设透明度值

应用:background:rgb(255,255,255,0.5)

color:rgb(255,255,255,0.5)

border:1px solid rgb(255,255,255,0.5)

text-shadow:文字阴影

text-shadow:左右偏移量 上下偏移量 模糊的程度 阴影颜色

还可以阴影叠加,如text-shadow:-5px -10px 1px red,5px 10px 2px green;

文字描边

-webkit-text-stroke:3px red;

-o-text-text-stroke:3px red;

-moz-text-stroke:3px red;

text-stroke:3px red;

文字效果

css3-文本新增属性

文字阴影

h1{text-align:center;color:pink;font-size:100px;font-weight:bold; text-shadow:2px 2px 0px white,4px 4px 0px pink;}

文字效果

css3-文本新增属性

文字排版(全兼容)

要跟unicode-bidi配合使用unicode-bidi:bidi-override;

<style>
p{width:300px; border:1px solid #000;font:14px/30px "宋体"; direction:rtl; unicode-bidi:bidi-override;}
</style>
</head> <body>
<p>文本新增属性哎呦啦</p>
</body>

文字效果

css3-文本新增属性

超出显示省略号

<style>
p{width:300px; border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}<!-- white-space:nowrap超出不换行,text-overflow:ellipsis文字超出后显示省略号,无省略号clip-->
</style>
</head> <body>
<p>博客园是个好地方博客园是个好地方博客园是个好地方博客园是个好地方</p>
</body>

效果如图:

css3-文本新增属性