CSS图案设计

最新推荐文章于 2023-04-07 19:10:52 发布
最新推荐文章于 2023-04-07 19:10:52 发布
阅读量184 收藏
点赞数
分类专栏： 前端 css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108832751
版权
前端 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
css
8 篇文章 0 订阅
订阅专栏

1.边框的设计
边框
其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

边框圆角

border-radius 每个角可以设置两个值 ，x 值，y 值
1: 边框圆角处理
2: 正方形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				margin: 100px auto;
				background-color: red;
				/* 四个角都是100px */
				/* border-radius: 100px 100px 100px 100px; */
				/* 1是50px 2、4是100px 3是50px */
				/* border-radius: 50px 100px 50px; */
				/* 1、3是100px 2、4是50px  */
				border-radius: 100px 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
		</div>
	</body>
</html>

在这里插入图片描述
椭圆
圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 200px;
				margin: 100px auto;
				background-color: red;
				border-radius: 50px 50px 50px 50px/100px 100px 100px 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

在这里插入图片描述
边框阴影

box-shadow 与 text/shadow 用法差不多
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3、模糊度是不能为负值；
4、inset 可以设置内阴影；

box-shadow: 10px 10px 20px  aqua;

渐变

渐变是CSS3 当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变

线性渐变 （gradient 变化）
linear-gradient 线性渐变指沿着某条直线朝一个方向产生渐变效果。
在这里插入图片描述
上图是从黄色渐变到绿色

Background:linear-gradient(yellow，green）

To right 表示方向 (left,top,right,left ,也可以使用度数)
Yellow, 渐变起始颜色
Green 渐变终止颜色
案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: salmon;
			}
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				margin:100px  100px;
				border-radius:100px 100px/100px 100px ;
				box-shadow: 10px 10px 50px yellow,-10px -10px 50px  chartreuse;
				background: linear-gradient(140deg,red,blue);
				float: left;
			}
			
			/* #div2{
				width: 200px;
				height: 200px;
				background-color: brown;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				border-top-left-radius: 100px;
				border-top-right-radius: 100px;
			}
			#div3{
				width: 200px;
				height: 200px;
				background-color: brown;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				border-top-left-radius: 200px;
			}
			#div4{
				width: 200px;
				height: 200px;
				background-color: brown;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				border-top-right-radius: 200px;
			}
			#div5{
				width: 100px;
				height: 50px;
				background-color: brown;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				border-radius: 50px 50px 0 0;
			}
			#div6{
				width: 200px;
				height: 200px;
				float: left;
				border-left: 100px solid red;
				border-right: 100px solid wheat;
				border-top: 100px solid gainsboro;
				border-bottom: 100px solid transparent;
				box-sizing: border-box;
				margin-top: 100px;
				margin-left: 100px;
			} */
			#div7{
				width: 100px;
				height: 50px;
				background-color: brown;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				border-radius:60px/ 25px;
			}
			#div8{
				width: 100px;
				height: 50px;
				background-color: yellow;
				float: left;
				margin-top: 100px;
				margin-left: 100px;
				/* border-radius:60px/ 25px; */
				border-top-left-radius: 60px;
				border-bottom-right-radius: 60px;
				border-left: 30px solid #0000FF;
				border-right: 30px solid #0000FF;
				box-sizing: border-box;
			}
			#nose{
				width: 100px;
				height: 100px;
				clear: both;
				margin:auto;
				margin-top: 200px;
				box-sizing: border-box;
				border-bottom: 100px solid yellow;
				border-right: 50px solid transparent;
				border-left: 50px solid transparent;
			}
			#mouth{
				width: 200px;
				height: 100px;
				background-color: #0000FF;
				margin:auto;
				margin-top: 50px;
				border-radius: 0 0 100px 100px;
			}
			#big{
				width: 500px;
				height: 500px;
				background-color: bisque;
				float: left;
				border-top-left-radius: 150px;
				border-top-right-radius: 150px;
				border-bottom-left-radius: 200px;
				border-bottom-right-radius: 200px;
			}
			#arm1{
				width: 300px;
				height: 50px;
				background-color: #A52A2A;
				clear: both;
				margin-left: 300px;
				margin-top: 550px;
				position: absolute;
				border-radius: 100px 50px;
			}
			#bodyy{
				width: 300px;
				height: 500px;
				background-color: #7FFF00;
				border-radius:300px 300px;
				clear: both;
				float: left;
				margin-left: 500px;
			}
			#bagua{
				width: 200px;
				height: 200px;
				background: linear-gradient(blue,red);
				border-radius: 100px;
				float: left;
			}
			#b1{
				width: 100px;
				height: 100px;
				background-color: red;
				border-radius: 100px;
				margin-top: 50px;
				position: relative;
			}
			#b2{
				width: 50px;
				height: 50px;
				background-color: #7FFF00;
				border-radius: 50px;
				position: absolute;
				margin-top: 25px;
				margin-left: 25px;
			}
			#b3{
				width: 100px;
				height: 100px;
				background-color: blue;
				border-radius: 100px;
				margin-top: -100px;
				position: relative;
				float: right;
			}
			#b4{
				width: 50px;
				height: 50px;
				background-color: #7FFF00;
				border-radius: 50px;
				position: absolute;
				margin-top: 25px;
				margin-left: 25px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
		</div>
		<div id="div2">
		</div>
		<div id="div3">
		</div>
		<div id="div4">
		</div>
		<div id="div5">
		</div>
		<div id="div6">
		</div>
		<div id="big">
			<div id="div7">
			</div>
			<div id="div8">
			</div>
			<div id="nose">
			</div>
			<div id="mouth">
			</div>
		</div>
		<div id="arm1">
			
		</div>
		<div id="bodyy">
		</div>
		<div id="bagua">
			<div id="b1">
				<div id="b2">
				</div>
			</div>
			<div id="b3">
				<div id="b4">
					
				</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

H之一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS绘制最常见的40种形状和图形，0基础前端开发
2401_84092143的博客
04-06 843
前端校招精编面试解析大全点击这里免费获取完整版pdf查看女性身体可视化修身工具前端校招精编面试解析大全点击这里免费获取完整版pdf查看。
CSS表格设计
weixin_46102402的博客
10-21 622
CSS表格 这学期要学jsp (什么时候还学jsp)无奈从HTML开始学习，发现html内置的表格不够美观（太难看了） 0. 表格的HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
css 常见图形绘制
似水流年QC的博客
09-08 1464
css 常见图形绘制。
常见的CSS图形绘制合集
qq_43067585的博客
08-24 607
展示40多个常见的纯CSS绘制图形，效果实时，含源代码，想要什么效果直接复制粘贴就好了。就算项目用不到，看看别人代码怎么写的也有助于提高CSS的基本功。 以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的。 1. 正方形 实时渲染效果如下： 相关CSS代码： #square { width: 100px; height: 100px; background: red; } 2. 长方形 效果： 相关CSS代码： #rectangle { width:
CSS制作的32种图形效果 梯形 | 三角 | 椭圆 | 平行四边形 | 菱形 | 四分之一圆 | 旗帜
AROUND
01-16 816
CSS制作的32种图形效果 梯形 | 三角 | 椭圆 | 平行四边形 | 菱形 | 四分之一圆 | 旗帜
用css画31个图形
qq_41429765的博客
04-11 319
代码 1. 椭圆 .oval{ width:200px; height:100px; background-color:skyblue; border-radius:100px/50px; } 2. 上三角 .triangle-up{ width:0; height:0; border-right:50pxsolidtransparent; border-bottom:100pxsolids...
css页面设计
qq_62422460的博客
04-07 88
场景，不但可以边看视频边回复，更可以一边聊天一边购物，写文档、回</p><p class="b">更强大的分屏多任务3.0
CSS学习案例图片素材
最新发布
04-17
这个“CSS学习案例图片素材”压缩包显然是为那些正在学习和提升CSS技能的人准备的，包含了一系列与CSS相关的图像资源，可能用于演示、练习或者教学。下面，我们将深入探讨CSS的一些核心概念和应用。 1. **CSS基本...
div+css网页设计案例图片资源
09-25
本资源包“div+css网页设计案例图片资源”显然提供了与这种技术相关的图像素材，可能是为了帮助学习者或设计师理解如何将Div和CSS应用于实际的网页设计项目。 1. **Div元素的理解与应用**： - Div元素是一个通用...
项目开发中css用图片素材
10-27
在项目开发中，CSS（Cascading Style Sheets）经常被用来定义网页的样式和布局，而图片素材作为视觉设计的重要组成部分，是提升用户体验的关键因素。本资源包包含了一系列用于Java项目中的CSS UI图片，这些图片涵盖...
纯css3绘制各种图形图标样式代码
11-24
纯css3绘制各种图形图标样式代码
html+css+js实现的8款图片展示设计，可用于制作网页版相册
07-04
这些设计不仅展示了HTML、CSS和JavaScript的基本用法，还涵盖了响应式设计、动态效果和用户交互等多个方面，是学习和实践网页开发的宝贵素材。开发者可以根据实际需求选择适合的设计模式，为自己的项目增添特色。...
粉色设计css模板下载
04-01
【粉色设计CSS模板下载】是针对网页设计领域的一款资源，主要特点是采用了柔和的粉色系作为主色调，结合了动物、植物、露珠、蝴蝶和鲜花等元素，为用户提供了具有自然与生活气息的设计素材。这款模板特别适合用于...
CSS实现多种图案
侯阮悦的博客
08-13 222
1.圆形 原理：上下左右都是圆角且为宽高一半 .circle{ width: 100px; height: 100px; background-color: red; border-radius: 50%; } 2.椭圆形 原理：块级元素为宽高比为2:1的矩形，border-radius为宽度的一半除以高...
一个制作Web图案的组件：css-doodle
W3cplus
06-22 1769
Web中使用一些图案做为背景图案是一种时常可见的，早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候，会通过CSS的相关技术，比如CSS的渐变属性配合b...
css画各种图形
雪落凡尘
08-10 103
1.三角形 .triangle{ width:0; height:0; border:50px solid transparent; border-left:50px solid red; // border-bottom:50px solid red; } .triangle{ width:0; height:0; border-right:100px solid transparent; border-bottom:100px solid red; } 2.扇
CSS：图形绘制合集
大前端
07-19 938
以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的，不少实现以前我介绍过，或者你也知道，但是有些相信你没见过。 1. 正方形 实时渲染效果如下： 相关CSS代码： #square { width: 100px; height: 100px; background: red; } 2. 长方形 效果： 相关CSS代码： #rectangle { width: 200px; ...
CSS3实现32种基本图形
热门推荐
laokdidiao的专栏
04-19 1万+
CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。      这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三
web表格制作
H_zhiyi的博客
08-20 1万+
1.表格的制作 1、表格元素–<table> 表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–bgcolor table标记的表格边框色–bordercolor table标记的表格中的内容与边框之间的距离–cellpadding table标记的表格中的边框与边框之间的距
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值