1. 文本阴影
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本阴影</title>
<style>
body {
background-color: black;
}
h1 {
font-size: 80px;
text-align: center;
color: white;
/* text-shadow: 3px 3px; */
/* text-shadow: 3px 3px red; */
/* text-shadow: 3px 3px 10px red; */
/* text-shadow: 0px 0px 15px black; */
text-shadow: 0px 0px 20px red;
font-family: '宋体';
}
</style>
</head>
<body>
<h1>带带大师兄</h1>
</body>
</html>2. 文本换行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本换行</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid black;
/*
white-space
normal：文本超出边界自动换行，文本中的换行被浏览器识别为一个空格（默认值）
pre：原样输出（与pre标签的效果相同）
pre-wrap：在pre效果的基础上，超出元素边界自动换行
pre-line：在pre效果的基础上，超出元素边界自动换行。且只识别文本中的换行，自动忽略首尾的空格（类似于trim）
nowrap：强制不换行
*/
white-space: pre-wrap;
}
</style>
</head>
<body>
<div>
山回路转不见君山回路转不见君山回路转不见君山回路转不见君山回路转不见君山回路转不见君
雪上空留马行处
</div>
</body>
</html>3. 文本溢出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本溢出</title>
<style>
ul {
width: 400px;
height: 400px;
border: 1px solid black;
font-size: 20px;
list-style: none;
padding-left: 0;
}
li {
margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>大数据透视元旦消费新趋势 “冰雪经济”成新增长点</li>
<li>图知道｜2024年1月起施行，这些新规值得关注</li>
<li>网信部门依法查处花椒直播、天天吉历APP等破坏网络生态案件</li>
<li>云南小伙靠直播把烧烤摊变网红店：白天播两小时，晚上门店就是满的</li>
<li>2023大国重器上新了这些！最后一个你一定没见过→</li>
<li>老照片：1985年昆明</li>
</ul>
</body>
</html>4. 文本修饰
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本修饰</title>
<style>
h1 {
font-size: 100px;
/* text-decoration-line: line-through;
text-decoration-style: wavy;
text-decoration-color: skyblue; */
text-decoration: line-through wavy skyblue;
}
</style>
</head>
<body>
<h1>孙笑川，又名：带带大师兄</h1>
</body>
</html>5. 文本描边
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本描边</title>
<style>
/* 只有webkit内核的浏览器支持 */
h1 {
font-size: 100px;
/* -webkit-text-stroke-color: red;
-webkit-text-stroke-width: 3px; */
-webkit-text-stroke: red 3px;
color: transparent;
}
</style>
</head>
<body>
<h1>先生您好，欢迎光临红浪漫！</h1>
</body>
</html>
评论 (0)