CSS图形绘制

Neil-

已于 2023-03-30 22:56:41 修改

阅读量325

点赞数

分类专栏： web前端 css javascript 文章标签： border-radius 圆 border 三角形 border-radius ant react hooks

于 2019-10-25 19:47:57 首次发布

本文链接：https://blog.csdn.net/luofeng457/article/details/102723648

版权

web前端同时被 3 个专栏收录

98 篇文章 0 订阅

订阅专栏

javascript

58 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

border-radius介绍

属性值：border-radius实际上包含8个值，可以写为border-radius: av bv cv dv \ ah bh ch dh；具体是由四个属性组成：

border-top-left-radius: ah av：左上角半圆的水平半径和垂直半径
border-top-right-radius: bh bh：右上角半圆的水平半径和垂直半径
border-bottom-right-radius: ch cv：右下角半圆的水平半径和垂直半径
border-bottom-left-radius: dh dv：左下半圆的水平半径和垂直半径
border-radius的百分比的基准是box-sizing: border-box，也就是说它的基准包含了元素自身的宽度+padding+border，基于上边的例子，如果我们给.circle添加宽度为10px的border需要变为60px
border-radius有一个大值特性，即对于一个div，其border-radius有一个临界最大值使其可以绘制为圆形，即使给定的border-radius值大于该值，浏览器会采用最小绘制；
根据上一条，当border-radius大于50%时，绘制的图形都是半径相同的圆形；

在线demo演示

border-radius绘制圆形、椭圆、半圆、1/4圆的

demo在线演示地址点击此处

demo实现代码点击此处

通过调整div的宽高及border-radius的8个属性值，让你直观看到每个分值对生成图形的影响。代码演示截图如下：

在这里插入图片描述

圆

使用border-radius特性；

代码实现，具体可见jsfiddle.net

	<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS图形绘制</title>
</head>
<body>
  <div class="wrapper">
    <div class="circle"></div>
  </div>
</body>
</html>

样式实现：

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.circle {
  width: 100px;
  height: 100px;
  margin: auto;
  background-color: #f2f2f2;
  border-radius: 50%;
}

椭圆

简单椭圆与圆无差，直接设置border-radius: 50%，其实具体的值还可以自己调整；示例参考JSFiddle

半圆

举例：创建一个宽高分别为200px/100px的div块元素，分别设置其border-top-left-radius: 100px 100px、border-top-right-radius: 100px 100px，即可得到一个上半圆；具体可以使用上边提供的zaixiandemo调试查看效果

1/4半圆

了解了border-radius的8个分值及特性，绘制半圆同样简单：

创建一个宽高相等的div，然后设置border-radius: witdh 0 0 0 ；这样就可以得到一个1/4圆，方向与非零值位置相关；

跑道

示例参见jsfiddle.net

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  width: 300px;
  height: 300px;
  background-color: lightblue;
}

.circle {
  width: 100px;
  height: 200px;
  margin: auto;
  border: 10px solid brown;
  background-color: #f2f2f2;
  border-radius: 100px;
}

在这里插入图片描述

border

border属性是四个属性的组合：

border-left
border-right
border-top
border-bottom

理解border

首先我们看一个demo, 我们创建一个宽高为100px的div，设置其border为50px；图示如下
我们可以看到，每个方向的border呈现一个梯形；

在线demo：
为了更加直观地观看border各属性值对图形的影响，我们同样制作了动态demo，支持调整div的宽高以及四个方向border的值；

demo地址点击此处

demo具体实现参见codesandbox.io

在这里插入图片描述

如果div的宽高变为0，那么每个方向的border将展现为三角形；到这里，相信制作一个三角形就比较容易了，我们可以仅保留一个方向的颜色，让其他三个方向的颜色均为透明，即可实现一个三角形；
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>react examples</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			width: 400px;
			height: 400px;
			background-color: #fbfbfb;
			display: flex;
		}
		.tri {
			width: 100px;
			height: 100px;
			margin: auto;
			background: powderblue;
			border-left: 50px solid rgb(156, 113, 113);
			border-right: 50px solid greenyellow;
			border-top: 50px solid palegreen;
			border-bottom: 51px solid peachpuff;
		}
	</style>
</head>
<body>
<div id="root"></div>
	<div class="container">
		<div class="tri"></div>	
	</div>
</body>
</html>

直接三角形

设置div的宽高为0，然后设置border中两个任意相邻的border属性值相等，其中一个设置为透明，即可得到直角三角形。

在这里插入图片描述

box-shadow与outline

box-shadow

利用box-shadow可以绘制多重边框，设置其前三个变量均为0（h-shadow、v-shadow、blur），然后使用spread为边框宽度；这里需要注意的是默认是外边框的，那么比如hover、点击等在box-shadow绘制的边框处是无法触发这些动作的；

为了解决该问题，可以设置box-shadow的第五个变量inset，使其变为内部阴影；

outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用；

它有三个属性，包括outline-color、outline-style、outline-width；另外，可以设置outline-offset对边框进行偏移，支持负值；

可以结合W3School的demo理解；

在这里插入图片描述

参考文献

Neil-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS图形绘制

圆使用border-radius特性；代码实现，具体可见jsfiddle.net <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS图形绘制</title></head><body> &...
复制链接

扫一扫