CSS文本樣式
- 一、text-shadow文本陰影
一、text-shadow文本陰影
text-shadow: 30px 30px 5px red;
text-shadow: red 0.3em 0.3em 0.3em;
/*x偏移量、y偏移量、模糊半徑、顔色(沒有指定使用color屬性值替代，位置可在最前可在最後)，可以多個參數添加多個陰影 */
- 文字燃燒效果
span {
font-size: 80px;
font-weight: bold;
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}
效果如下
span {
font-size: 80px;
font-weight: bold;
background-color: #ccc;
color: #d1d1d1;
text-shadow: 0 1px white, 0px -1px white, 1px 0px white, -1px 0 white;
}
span {
font-size: 80px;
font-weight: bold;
background-color: #ccc;
color: #d1d1d1;
text-shadow: 1px 1px #333, -1px -1px white;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px 0 0 50px;
}
div {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci veritatis dolorum, accusantium
assumenda
perspiciatis sed quo ab eaque laborum perferendis consequuntur cumque natus, autem officia soluta ut?
Similique,
recusandae earum.
Animi iste hic assumenda error est illum molestias, magnam perferendis dolores, quibusdam porro natus. Ipsam
ullam quasi quae laboriosam alias nesciunt necessitatibus optio dicta suscipit nemo accusamus, voluptatibus
perferendis distinctio?
Suscipit nulla, ipsa assumenda ullam temporibus natus similique esse, accusamus quam nesciunt eaque quis
voluptatibus? Dolorem omnis accusantium vitae? Nam iusto optio ipsum earum at voluptatibus rerum sint
assumenda
eos.
</div>
</body>
</html>