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>