Web前端开发——CSS3之圆角边框与阴影
程序员文章站
2022-06-17 15:46:16
...
目录
1. 内容
2. CSS新特性
CSS3应用比较多的新特性：
- 文本的阴影效果；
- 鼠标悬停动态效果。比如鼠标悬停在图片上可以出现说明文字，在原来css技术上，只有js能够实现，现在可以用纯CSS3实现；
- 分栏分列式的排版。在css3中可以采用可以采用分列的的形式实现类似于报利的排版方式；
- 盒子的圆角边框和外层阴影效果以及旋转效果；
3. 浏览器
3.1 浏览器前缀
W3C在制定所有标准的时候，它是有一个过程的，新标准刚推出的时候没有定稿，所以浏览器厂商会快速的在最新的版本里面加入对新的属性和功能支持，那么所以这个时候它要在这些属性前面加上自己的前缀，表示是自己的这个浏览器的一个支持，当W3C所有标准确定之后，这时候浏览器全面的开始支持新属性，这是属性的前缀才会被去去掉。
3.2 浏览器支持度
我们在w3schoo这个网站上，可以看到当你打开某一个属性，当前这个网站上会有这个属性，所有浏览器的一个支持度，那么有了这个支持度，我们就可以了解这个属性需不需要添加前缀，然后根据它的支持情况来添加不同的前缀
4. 圆角边框border-radius
4.1 基本用法
每个方向的值分为两个值或者一个值，如果两个值的情况，就表示一个是水平值，一个是垂直方向的值，也就是一个是X值，一个是Y值，如果是一个值意味着水平方向和垂直方向上值是相等的
如上图所示，四个方向只要确定了水平值和垂直值就可以确定一个椭圆或者圆出来。
4.2 案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
width: 150px;
border: 1px solid blue;
border-top-left-radius: 40px 20px;
border-bottom-right-radius:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>4.2 案例2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 50px;
width: 350px;
border: 2px solid #a1a1a1;
border-radius:25px ;
background: #ddd;
}
</style>
</head>
<body>
<div></div>
</body>
</html>当设为border-radius时表示四个方向 ；
webstorm可以使用bdrs按tab键后快速扩展。
4.3 案例3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div
{
width:100px;
height:100px;
border:1px solid #a1a1a1;
background:#ddd;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>设置盒子为正方形， border-radius数值为高或宽的一半时即为圆形
5. 阴影box-shadow
- box-shadow默认为outset，外部阴影效果如左图，不设置为inset时，可以直接输入属性值的四个参数；
- inset为内部阴影效果，如右图，常用的时外部阴影效果；
- 水平偏移向右为正，向左为负；垂直偏移向下为正，向上为负
- 模糊距离表示当前阴影部分有多大范围，这个是一个阴影的断散距离，距离越大，阴影模糊距离越大；
- 颜色则表示为阴影的颜色，通常我们都采用黑色、深灰色来表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div
{
width:300px;
height:100px;
background-color:#f90;
box-shadow: 10px 10px 5px #888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>