css3 -数据天堂

css3

# 前端 2024-04-03 04:38 0 14 来源：数据天堂

目标伪类选择器

给跳转到的目标设置样式

<!-- 目标伪类选择器 --> <a name="target">目标</a> <a href="#target">显示目标</a>

:target{ border: 1px solid red; color: blueviolet; }

outline:

outline位于border之外

input{ outline-color: red; border: 10px solid darkblue;}

 <input type="text">

多列布局：

columns:复合属性
column-width:列宽
column-gap:列间隔
column-count:列数
column-rule:列边线

 <div id="main" > <div></div> <div></div> <div></div> <div></div> </div>

 #main { height: 300px; columns: 4; } #main div:nth-child(1) { width: 300px; height: 50px; background-color: aquamarine; } #main div:nth-child(2) { width: 300px; height: 50px; background-color: skyblue; } #main div:nth-child(3) { width: 300px; height: 50px; background-color: navy; } #main div:nth-child(4) { width: 300px; height: 50px; background-color: darkkhaki; }

圆角边框：border-radius

<div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div>

 div{ width: 50px; height: 50px; background-color: red; text-align: center; float: left; margin-right: 100px; } #div1{ border-top-left-radius: 50%; } #div2{ border-top-left-radius: 50%; border-top-right-radius: 50%; } #div3{ border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; } #div4{ border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; }