本文介绍了CSS中的圆角边框设置、不同形状的实现、box-shadow的用法、CSS动画、transform的使用，以及伪元素选择器和基本语法。涵盖了CSS基础知识和一些实用技巧。
源代码
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center,rgba(83, 191, 164, 0.096),#27474c);
}
.radar{
width: calc(250px + 48px);
height: calc(250px + 48px);
border: 2px solid black;
background:
repeating-radial-gradient(
transparent 0,
transparent 30px,
darkgreen 30px,
darkgreen 32px
),
linear-gradient(
transparent 49.75%,
darkgreen 49.75%,
darkgreen 50.25%,
transparent 50.25%
),
linear-gradient(
90deg,
transparent 49.75%,
darkgreen 49.75%,
darkgreen 50.25%,
transparent 50.25%
),
linear-gradient(black,black)
;
border-radius: 50%;
position: relative;
}
.radar::before{
content: '';
position: absolute;
width: calc(256px / 2);
height: calc(256px / 2);
background: linear-gradient(
45deg,
rgba(0,0,0,0) 50%,
rgb(156, 244, 156) 100%
);
border-radius: 100% 0 0 0;
top: calc(48px / 2);
left: calc(48px / 2);
animation: scanning 5s linear infinite;
transform-origin: 100% 100%;
}
@keyframes scanning{
to{
transform: rotate(360deg);
}
}
</style>
<body>
<div class="radar">
<div class="box"></div>
</div>
</body>运行效果
圆角边框的设置
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
width: 100px;
height: 100px;
border-radius: 5px 10px 15px 20px;
background-color: aqua;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
综上可得，border-radius:5px10px15px20px;从左上角开始顺时针依次变化。
圆形的写法
border-radius:50px;
同理，若想要整个图形相等比例的圆角化的话，就写一个border-radius值即可。
补充一个盒子阴影box-shadow的知识
box-shadow基础
CSS中常见的长度单位
px
px是一种常见的绝对单位，表像素，相对于屏幕分辨率的，页面按照精确像素展示，不会因为其它元素的尺寸变化而变化。
vh
表示当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。
设置height:100vh，无论元素没有内容，该元素都会被撑开与屏幕高度一致
扩展知识：
- vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
- vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;
- vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
- vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
em
em是一个相对单位，相对于当前对象内文本的字体尺寸，如当前对行内的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。如设置首行缩进或空格可以用em进行设置。
百分比％
%百分比为单位的长度值，是基于具有相同属性的父元素的长度值。eg：如果一个元素呈现的宽度是1000px，子元素的宽度设为50%，那么子元素呈现的宽度为500px。（如果所有的父级元素都没有设置具体的值，那么设置百分比高度那会导致所有的元素的值都为0）。
fr
fr是gird布局中利用的一个长度单位，在gird布局中，我们经常会利用fr来进行计算。
设置背景颜色渐变
渐变基础
渐变参数讲解
动画的讲解
选择器的使用
伪元素（标签）选择器的使用
伪元素选择器的基本语法为：
selector::pseudo-element(向目标元素内添加伪元素，并对伪元素的内容进行修饰){
color:red;
font-size:30px;
}
selector（目标元素）双冒号pseudo-element花括号，其中selector为目标元素；双冒号pseudo-element，代表的是 向目标元素内，添加伪元素，并对伪元素的内容进行修饰。(selector::pseudo-element{attribute:value})
在CSS选择器中，伪元素选择器有五种：
- 双冒号first-letter(::first-letter) 伪元素，用来实现向文本的首个字符，添加特殊样式。
- 双冒号first-line(::first-line) 伪元素，用来实现向文本的首行，添加特殊样式。
- 双冒号before(::before) 伪元素，用来实现在元素内容之前插入内容。
- 双冒号after(::after) 伪元素，用来实现在元素内容后面，插入内容。
- 双冒号selection(::selection) 伪元素，用来更改选中文本的样式。
注意：在使用伪元素向前/向后时要配合内容content才能实现效果
selection伪元素选择器只支持：color、background、cursor（鼠标样式）、outline描边效果这几种样式的使用
本版块属于个人笔记写的比较粗糙，若需要具体学习可以进一步去搜寻资料。
零基础教你学前端——59，CSS伪元素选择器 - 知乎 (zhihu.com)
伪类选择器：
:link 鼠标点击前
:visited鼠标点击后
:hover鼠标悬停时
:active鼠标点击时的瞬间
注意：
冒号后没有空格
必须按照上面介绍的顺序去编写
全部一起使用主要时运用在超链接上面，偶尔独立运用在其他地方
扫一扫
1515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
