虚线(dashed); 实线(solid); 双线轮廓(double);
顶部边框的线 border-top:1px solid gray;
取消边框 border:none;
有边框,但像素为0 border:0;
边框透明 border:transparent;
三角形箭头 font-size:0; width:0; height:0; border:15px solid transparent; border-left-color:aqua;
border-top-color:green;
取消下划线 text-decoration:none; 装饰(decoration)
字间距 letter-spacing 2px;
取消加粗 font-weight:normal;
左侧边距 padding-left:18px;(内边距 padding:18px;)
绝对定位 position:absolute:
相对定位 position:relative;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Title</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<!-- dashed: 虚线; solid: 实线; double 双线轮廓
顶部边框的线 border-top:1px solid gray;
取消边框 border:none;
有边框,但像素为0 border:0;
边框透明 border:transparent;
三角型箭头
font-size:0;
width:0;
height:0;
border:15px solid transparent;
border-left-color:aqua;
border-top-color:green;
取消下划线 text-decoration:none; 装饰(decoration)
字间距 letter-spacing 2px;
取消加粗 font-weight:normal;
左侧边距 padding-left:18px;(内边距 padding:5px)
position:absolute;相对定位(relative); 绝对定位(absolute)
-->
<style>
p {
/*设置p标签光标的形状*/
cursor: url("images/kai.jpg"), default !important;
}
@font-face {
font-family: "caoshu";
src: url("fonts/caoshu.TTF");
}
span, div, p {
font-family: 'caoshu';
border: 1px solid gray;
}
p {
/*框顶部的线*/
/*border-top: 1px dashed aquamarine;*/
/*取消边框*/
/*border: none;*/
/*有边框,但像素为0*/
/*border: 0;*/
/*边框透明*/
/*border:transparent;*/
border: 1px solid transparent;
text-align: center;
}
p:hover {
border-color: gray;
}
/*三角形尖头*/
.arrow {
font-size: 0;
width: 0;
height: 0;
border: 15px solid transparent;
border-left-color: aqua;
border-top-color: green;
}
.tt {
/*取消下划线 装饰 decoration*/
text-decoration: none;
/*盒子*/
display: block;
/*字间距2像素*/
letter-spacing: 2px;
/*取消加粗*/
font-weight: normal;
width: 150px;
height: 45px;
background-color: aqua;
font-size: 18px;
/*行高*/
line-height: 45px;
/*左侧边距 内边距(padding:5px)*/
padding-left: 18px;
/*圆角效果 border-radius:5px 0 0 5px */
border-radius: 5px 0 0 5px;
}
.tt::after {
content: '';
width: 0;
height: 0;
font-size: 0;
border: 30px solid transparent;
border-right-color: white;
/*相对定位 relative; 绝对定位 absolute*/
position: absolute;
transform: translate(-3px, -8px);
}
.green {
background-color: green;
}
</style>
</head>
<body>
<span>雪中悍刀行</span>
<div>div</div>
<p>玄甲、青梅、竹马、朝露、春水、桃花、峨眉、朱雀、黄桐、蚍蜉、金缕、太阿</p>
<p>Lorem ipsum dolor.</p>
<p>Dolores, nesciunt recusandae.</p>
<p>Eligendi, quam, vero.</p>
<!-- 三角符号 -->
<div class="arrow"></div>
<h3 class="tt">雪中悍刀行</h3>
<hr>
<a href="" class="tt">凯迪拉克C</a>
<br>
<h1 class="tt green">玄甲、青梅</h1>
</body>
</html>