CSS - border -绘画（梯形、三角形）_bordar-radius 梯型_LSYHhhhh的博客

相关文章推荐

曾深爱过的乒乓球 · 信息服务―深圳大学信息中心· 10 月前 ·

谦和的冲锋衣 · React如何重定向到第三方网址_react ...· 1 年前 ·

独立的跑步鞋 · 【分享】讯飞星火认知大模型Python调用上 ...· 1 年前 ·

可爱的长颈鹿 · 现在手里有一堆JSON格式的数据，如何转化成 ...· 2 年前 ·

暴走的长颈鹿 · Java9系列第7篇：Java.util.O ...· 2 年前 ·

border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; /*隐藏*/ /*border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent;*/

<!DOCTYPE html>
	<meta charset="UTF-8">
	<title>border</title>
	<!-- 画梯形 -->
	<style type="text/css">
		.bd {
			width: 100px;
			height: 100px;
			background-color: transparent;
	<!-- 画三角形 -->
		.bd {
			width: 0;
			height: 0;
		.bd {
			border-top: 50px solid orange;
			border-right: 50px solid cyan;
			border-bottom: 50px solid yellow;
			border-left: 50px solid blue;
	</style>
</head>
	<div class="bd"></div>
</body>
</html>

<!DOCTYPE html>
	<meta charset="UTF-8">
	<title>border</title>
	<!-- 画梯形 -->
	<style type="text/css">
		.bd {
			width: 100px;
			height: 100px;
			background-color: transparent;
	<!-- 画三角形 -->
		.bd {
			width: 0;
			height: 0;
		.bd {
			border-top: 50px solid orange;
			border-right: 50px solid cyan;
			border-bottom: 50px solid yellow;
			border-left: 50px solid blue;
		/*吃球球的小球*/
		.bd {
			border-radius: 50%;
			border-right: 50px solid transparent;
	</style>
</head>
	<div class="bd"></div>
</body>
</html>

画梯形&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;border&lt;/title&gt; &lt;!-- 画梯形 --&gt; &lt;style type="text/css"&gt;

border 是围绕元素内容和内边距的一条或多条线， border 属性允许你规定元素边框的样式、宽度和颜色 border -width 粗细 none/hidden/solid/dashed/dotted border -color 颜色默认颜色是字体颜色 border -style 类型可以综合写成： border ...

border -top: 50px solid red; border -right: 50px solid green; border -bottom: 50px solid black; border -left: 50px solid yellow; border - radius : 10px 5px / 7px 10px 3px; // 使用（/）单独指定水平和垂直半径;斜杠两侧值类似margin、padding用法,分别设置左上、右上、右下、左下 borde... background-color: brown;/* 颜色 */ border - radius : 8px;/* 设置圆角 */ transform: perspective(8px)scale(1.1, 1.3) rotateX(5deg); /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴. 1.1.1 作用一个指定边框弯曲程度的属性，它的值可以是长度单位，也可以是百分比。当它的值为百分比的时候，代表的实际长度是使用该元素的标签长或者宽对应的长度百分比。 border - radius 的其它属性和 border 属性几乎没有差别，这里不再介绍。 1.1.2注意事项当 border - radius 被拆开写为 border -top- radius 的时候，它的值其实可以由两个，会画出一个椭圆行的外边框出来，... 里面其实就是一个普通的矩形div，但是将它设置的比外面的div长宽都要大，然后做旋转处理。外面的div把超出的部分做hidden处理，中间那个只显示部分看起来就是一个梯形了。因为提取修改的是项目代码里面部分，我需要画的是贴底的梯形，所以那部分的样式也保留了，主要关注下面rotate那部分代码就是了 <div class="title_box"> <div class="lighter_box"> .title_b.

`mini- css -extract-plugin` 是一个 Webpack 插件，用于从 JavaScript bundle 中提取 CSS 到单独的文件中。与使用 `style-loader` 将 CSS 插入 `<style>` 标签不同，`mini- css -extract-plugin` 可以帮助您创建一个单独的 CSS 文件，该文件可以在浏览器中缓存，从而提高网站的性能和加载速度。使用 `mini- css -extract-plugin` 非常简单。首先，您需要在 Webpack 配置文件中安装和导入插件： ```javascript const Mini Css ExtractPlugin = require('mini- css -extract-plugin'); 然后，您需要在插件配置中指定输出文件的名称和路径： ```javascript plugins: [ new Mini Css ExtractPlugin({ filename: ' css /[name].[contenthash]. css ', 在上面的代码中，`filename` 选项指定输出文件的名称和路径。`[name]` 会被替换为入口名称，`[contenthash]` 会被替换为根据文件内容生成的哈希值，这样可以确保每次构建生成的文件都有一个唯一的文件名。最后，您需要在 Webpack 配置文件的加载器中使用 `mini- css -extract-plugin`，以便在构建期间从 JavaScript bundle 中提取 CSS ： ```javascript module: { rules: [ test: /\. css $/, use: [Mini Css ExtractPlugin.loader, ' css -loader'], 在上面的代码中，`Mini Css ExtractPlugin.loader` 用于从 JavaScript bundle 中提取 CSS ，` css -loader` 用于将 CSS 转换为 JavaScript 可以理解的模块格式。这些加载器可以根据您的需要进行修改，以便处理不同类型的 CSS 。以上是使用 `mini- css -extract-plugin` 的基本步骤。使用此插件可以帮助您提高网站的性能和加载速度，特别是对于大型网站和长时间运行的应用程序。