CSS3_边框 border 详解_一个 div 的阴阳图

（面试题）

怎么样通过 CSS 画一个三角形：

1. 元素的 width 和 height 设置为 0

2. 边框足够大

3. 需要的三角形的部分， border-top-color 设置为有色

4. 不需要的部分 border-right-color，border-bottom-color，border-left-color，设置为透明色

color: rgba(0,0,0,0);// 或者
color: #0000;// 或者
color: transparent;

圆角边框（支持所有元素，无论块元素，还是行内元素）

尽管，border-radius 将元素变成了圆形，但是里面的文本子元素，仍旧沿着矩形盒子进行排列。

CSS3 提供的特性：尽管盒子的外形和位置发生了变换，但是元素在文档流中的位置是不变的

border-radius: 50%; // 百分比参照盒子自身。
- 当 width = height 时，会画一个圆形。
- 当 width 不等于 height 时，会画一个椭圆形。
  - 椭圆形
```
#box {width: 300px;height: 200px;  border-radius: 150px/100px;    // x 轴半径 / y 轴半径
}
```

语法：

#box {border-radius: 30px 10px 50px 0;    // 左上 右上 右下 左下border-radius: 30px 10px 50px;border-radius: 30px 10px;border-radius: 30px;
}

用 CSS 画一个半圆

#box {width: 100px;hright: 200px;border-radius: 0  100% 100% 0;// border-radius: 100% 0 0 100%;
}#box {width: 200px;hright: 100px;border-radius: 100% 100% 0 0 ;// border-radius: 0 0 100% 100%;
}

用 CSS 画一个扇形

#box {width: 100px;hright: 100px;border-radius: 100% 0 0 0;// border-radius: 0 100% 0 0 0;// border-radius: 0 0 100% 0;// border-radius: 0 0 0 100%;
}

用 CSS 画一个太极图

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>太极图</title><style type="text/css">#test_box {width: 200px;height: 200px;border-radius: 50%;margin: 30px auto;background-color: red;position: relative;}#test_box #left_box,#test_box #right_box {width: 100px;height: 200px;float: left;}#test_box #left_box {background-color: #000;border-radius: 100px 0 0 100px;}#test_box #right_box {background-color: #fff;border-radius:  0 100px 100px 0;}#test_box #top_box,#test_box #bottom_box {width: 100px;height: 100px;border-radius: 50%;position: absolute;left: 50%;margin-left: -50px;}#test_box #top_box {top: 0;background-color: #000;}#test_box #bottom_box {bottom: 0;background-color: #fff;}#test_box #top_box #white_dot,#test_box #bottom_box #black_dot {width: 20px;height: 20px;border-radius: 50%;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}#test_box #top_box #white_dot {background-color: #fff;}#test_box #bottom_box #black_dot {background-color: #000;}</style></head><body><div id="test_box"> <div id="left_box"></div><div id="right_box"></div><div id="top_box"><div id="white_dot"></div></div><div id="bottom_box"><div id="black_dot"></div></div></div></body>
</html>

只用一个 <div> 画太极阴阳图

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>神分阴阳</title><style type="text/css">body {width: 100%;color: #000;background: #96b377;font: 14px Helvetica, Arial, sans-serif;}#test_box {width: 100px;height: 200px;border-right: 100px solid #fff;border-radius: 50%;margin: 30px auto;background-color: #000;position: relative;top: 0px;left: 0px;}#test_box:before {content: "";width: 20px;height: 20px;border: 40px solid #000;border-radius: 50%;background-color: #fff;position: absolute;top: 0px;left: 100%;margin-left: -50px;/* 左右 上下 模糊 颜色 */box-shadow: 4px 0px 4px #a66fe2;}#test_box:after {content: "";width: 20px;height: 20px;border: 40px solid #fff;border-radius: 50%;background-color: #000;/* 左右 上下 模糊 颜色 */box-shadow: -5px 0px 4px #c4d0a7;position: absolute;bottom: 0px;left: 100%;margin-left: -50px;}</style></head><body><div id="test_box"></div></body>
</html>

弧形凹陷 评论框

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>弧形凹陷 评论框</title><style type="text/css">body {               background-color: #96b377;           ｝            #test_box {width: 800px;height: 300px;margin: 300px auto 0px;border: 1px solid red;background-color: skyblue;position: relative;top: 0px;left: 0px;}#test_box #arc {width: 100px;height: 100px;border-radius: 50%;background-color: #96b377;border: 1px solid red;position: absolute;top: -70px;left: 70px;}#test_box #arc #mask {width: 102px;height: 100px;background-color: #96b377;position: absolute;top: -32px;left: -1px;}#test_box #arc #circle_login {width: 70px;height: 70px;border-radius: 50%;background-color: #ccc;text-align: center;line-height: 70px;font-size: 24px;position: absolute;z-index: 2;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style></head><body><div id="test_box"> <div id="arc"><div id="mask"></div><div id="circle_login">登录</div></div></div></body>
</html>

四叶草旋转初探 CSS3 动画

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>四叶草旋转 初探 CSS 动画</title><style type="text/css">body {width: 100%;color: #000;background: #96b377;font: 14px Helvetica, Arial, sans-serif;}#test_box {width: 624px;height: 624px;margin: 60px auto;list-style: none;animation: turnAround 1s linear infinite;}@keyframes turnAround {from {transform: rotate(0deg)}to {transform: rotate(360deg)}
}#test_box li {float: left;width: 300px;height: 300px;margin: 5px;border: 1px solid red;background-color: #eee;}#test_box li:nth-child(1),#test_box li:nth-child(4) {border-radius: 0 230px 0 230px;}#test_box li:nth-child(2),#test_box li:nth-child(3) {border-radius: 230px 0 230px 0;}</style></head><body><ul id="test_box"> <li></li><li></li><li></li><li></li></ul></body>
</html>

转载于:https://www.cnblogs.com/tianxiaxuange/p/9934320.html

CSS3_边框 border 详解_一个 div 的阴阳图相关推荐

Spring事务管理详解_基本原理_事务管理方式
Spring事务管理详解_基本原理_事务管理方式 1. 事务的基本原理 Spring事务的本质其实就是数据库对事务的支持,使用JDBC的事务管理机制,就是利用java.sql.Connection对象 ...
realloc重分配内存详解_羽夜水之灵_百度空间
realloc重分配内存详解_羽夜水之灵_百度空间 realloc重分配内存详解_羽夜水之灵_百度空间 realloc重分配内存详解最近在写source code时需要在数组的buffer小时重新申 ...
python count函数代码_python count函数用法详解_后端开发
fgetc函数的作用详解_后端开发 fgetc函数的作用是从指定文件读入一个字符,要求文件的打开方式必须是以读或读写的方式或者追加的方式,只写方式是不能读的. 在python中可以使用"c ...
php vimrc配置文件,vim技巧：我的 .vimrc 配置文件，详解每一个配置项的作用
下面是我的 .vimrc 配置文件,每一个配置项都添加了注释说明,详解每一个配置项的作用,以便确认为什么要添加这个配置项. " 使用vim的modeline来设置当前文件的textwidth ...
命令提示符使用java 类报错_lt;03gt;详解第一个Java程序
详解第一个Java程序视频教程: Java轻松入门经典教程ke.qq.com 1.编写源程序新建一个文本文档,名称为HelloWorld,后缀为.java,右键编辑. 编写一个打印HelloWor ...
(4)top详解 (每周一个linux命令系列)
(4)top详解 (每周一个linux命令系列) linux命令 top详解引言:今天的命令是用来看cpu信息的top top 我们先看man top top - display Linux pro ...
(5)ps详解 (每周一个linux命令系列)
(5)ps详解 (每周一个linux命令系列) linux命令 ps详解引言:今天的命令是用来看进程状态的ps命令 ps 我们先看man ps ps - report a snapshot of t ...
Apollo6.0代码Lattice算法详解——Part4:计算障碍物ST/SL图
Apollo6.0代码Lattice算法详解--Part4:计算障碍物ST/SL图 0.前置知识 1.涉及主要函数 2.函数关系 3.部分函数代码详解 3.1 lattice_planner.cc中代 ...
group convolution (分组卷积)的计算量详解、卷积计算量特征图大小，池化特征图大小、深度通道deep-wise 卷积
group convolution (分组卷积)的计算量详解.卷积计算量特征图大小,池化特征图大小.深度通道deep-wise 卷积提示:最近忙着各种提前批的笔试面试,所以没太多空刷题了都,先复盘一 ...

CSS3_边框 border 详解_一个 div 的阴阳图

CSS3_边框 border 详解_一个 div 的阴阳图相关推荐

最新文章

热门文章