元素整体透明度、边框合并、选择器扩展
站长
· 阅读数 1
元素整体透明度
opacity 可以让元素整体（包括内容）一起变透明，在 0 - 1 之间取值，0 表示完全透明，1 表示完全不透明。
<style>
.one {
width: 120px;
height: 120px;
background-color: rgb(17, 191, 249);
}
.two {
opacity: 0.3;
width: 60px;
height: 60px;
background-color: rgb(51, 242, 30);
}
</style>
<body>
<div class="one">
<div class="two">元素透明度</div>
</div>
</body>
边框合并
border-collapse:collapse 可以让相邻的表格的边框进行合并，得到细线边框效果
<style>
table {
border-collapse: collapse;
border: 1px solid #000;
}
tr,
td {
border: 1px solid #000;
}
</style>
<body>
<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
用 CSS 画三角形技巧
在网页中展示出的小三角，除了可以使用图片外，还可以使用代码实现，其原理就是利用盒子边框完成。
实现步骤：先设置一个盒子，设置四周不同颜色的边框；然后设置盒子的宽高为 0 ，仅保留边框；最后会得到四个三角形：
选择其中一个后，将其他的三角形边框颜色设置成透明，就会得到一个小三角形：
通过调整不同边框的宽度，可以调整三角形的形状
<style>
div {
width: 0;
height: 0;
border-left: 50px solid lightgreen;
border-top: 20px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid transparent;
}
</style>
<body>
<div></div>
</body>
选择器扩展
（1）链接伪类选择器
链接 伪类选择器常用于选中超链接的不同状态，它有四种状态：
- 未访问（ link ） ：选中超链接未访问过的状态
- 访问之后（ visited ）：选中超链接访问过之后的状态
- 鼠标悬停（ hover ）：选中鼠标悬停的状态
- 鼠标按下（ active ）：选中鼠标按下的状态
上面四种伪类链接选择器可以分开使用，也可以一起使用，如果要同时实现以上四种伪类状态的显示效果，需要按照 LVHA 顺序书写，记不住的话，可以这样来记 “买了一个 LV 包包，HA 开心”
（2）焦点伪类选择器
焦点 伪类选择器用于选中元素获取焦点时的状态，常用于 表单控件
表单控件获取焦点时默认会显示外部轮廓线，选择器语法：
示例：把光标移到 input 输入框里面，点击鼠标，就会 获得焦点 ，然后输入框变成蓝色，同时显示外部轮廓线；把光标从输入框移开，点击网页任意地方，输入框就会 失去焦点 ，恢复原始形态：
<style>
input:focus {
background-color: lightblue;
}
</style>
<body>
<input type="text" />
</body>
（3）属性选择器
通过元素上的 HTML 属性来选择元素，通常用于选择 input 标签
属性选择器常用语法：
<style>
input[value] {
background-color: lightblue;
}
input[type='text'] {
background-color: lightgreen;
}
</style>
<body>
<input type="text" />
<br>
<input type="password" value="psd" />
</body>
