devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用css绘制图形_css画长方形

作者：小蓝xlanll | 2024-02-16 21:49:20

赞

踩

css画长方形

使用css绘制图形

预备知识

CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。

css入门容易，想学深还是挺难的， CSS涉及的内容太多了，从https://www.w3schools.cn/css/可以直观的感受到。CSS 样式定义多，属性很多，不同属性的组合会有不同的效果，不直观，无法像编程那样推测结果，需要大量试验试出来，靠经验积累。所以学习参考一些例子，有助于加快学习了解，开始时不要追求全面深入理解，通过逐步接触练习，慢慢就会熟悉并生巧。

【CSS快速入门 https://blog.csdn.net/cnds123/article/details/112976663 】

CSS中有一个重要概念选择器，因为本文用到，先介绍一下。

CSS中，选择器用来指定网页上我们想要样式化的HTML元素。

有了选择器就可以把你想要的那个元素选中方式，为这个元素添加CSS样式。

css选择器的种类是有很多的，如

ID选择器（如：id="name"）。

类选择器（如：class=" line"） 。

【注：id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。与id属性具有唯一性不同，可以为同一个页面的相同元素或者不同元素设置相同的class。】

标签选择器（如：body,div,p,ul,li）。

等等。【可参见 https://blog.csdn.net/cnds123/article/details/125926256 】

css绘制图形用到的属性（Property）简要介绍

【详见 CSS 参考手册 https://www.w3schools.cn/cssref/default.asp】

margin 属性设置元素的外边距。margin 属性设置元素的边距，是以下属性的简写属性：

margin-top

margin-right

margin-bottom

margin-left

该属性可使用 1 到 4 个值：

如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px

如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。

如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。

如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

可设置如下值：

auto - 默认。浏览器计算高度和宽度。

length - 以 px、cm 等定义高度/宽度。

% - 以包含块的百分比定义高度/宽度。

initial - 将高度/宽度设置为默认值。

inherit - 从其父值继承高度/宽度。

【长度单位

许多 CSS 属性接受"长度"值，诸如 width、margin、padding、font-size 等。

长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。

对于某些 CSS 属性，允许使用负的长度。

长度单位有两种类型：绝对单位和相对单位。区别是使用的单位：绝对长度单位如cm、mm、px，相对长度单位如 em、rem、%。】

border 简写属性（shorthand property）在一个声明设置元素的所有的边框属性。

可以按顺序设置如下属性：

border-width

border-style (必须)

border-color

如果省略边框颜色，则应用的颜色将是文本的颜色。

border-color 属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

使用css绘制图形

html部分，设置放置图形的容器——如用<div> 标签设置文档中的一个区域。<div class=' shape'></div>

css部分，定义形状样式规则。要绘制一个长方形（只有外框线，没有内部填充），样式规则如下：

.shape {

    height:100px;

    width:200px;

    border:2px solid;

    border-color: red green blue pink;

 }

完整代码如下：

  1. <!DOCTYPE html> 
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width" /> 
  6.     <title>css绘制长方形</title>
  7.  
  8. <style>
  9. .shape {
  10.     height:100px;
  11.     width:200px;
  12.     border:2px solid;
  13.     border-color: red green blue pink;
  14.  }
  15. </style>
  16. </head>
  17. <body>
  18. <div class='shape'></div>
  19. </body>
  20. </html>

运行效果：

 线段的绘制

线段有实线段以及虚线段

html部分，定义容器：

<div class='line'> </div>

css部分，定义形状样式规则：

.line {

    margin-top:50px;       

    width: 100px; 

    border-top:2px dashed red; /* 实线solid  ；虚线dashed 或dashed */

}

完整代码如下：

  1. <!DOCTYPE html> 
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width" /> 
  6.     <title>css画线段</title>
  7.  
  8. <style>
  9. .line {
  10.     margin-top:50px;   	
  11.     width: 100px;  
  12.     border-top:2px dashed red; /* 实线solid  ；虚线dashed 或dashed */
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class='line'></div>
  18. </body>
  19. </html>

运行效果

三角形的绘制

为便于初学者理解，我们先从如下情况开始

Html部分

<div class="shape1"></div>

css部分

.shape1{

         height: 40px;

         width: 40px;

         border-top: 50px solid red;

         border-right:50px solid green;

         border-bottom: 50px solid yellow;

    border-left: 50px solid blue; 

}

完整代码如下：

  1. <!DOCTYPE html> 
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width" /> 
  6.     <title>css画边框</title>
  7. <style>
  8.     .shape1{
  9. 	height: 40px;
  10. 	width: 40px;
  11. 	border-top: 50px solid red;
  12. 	border-right:50px solid green;
  13. 	border-bottom: 50px solid yellow;
  14.     border-left: 50px solid blue;
  15.     }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="shape1"></div>
  20. </body>
  21. </html>

运行效果如下图左

在上中，红色梯形块代表是上边框宽度，绿色梯形块代表右边框宽度，黄色梯形块代表下边框宽度，蓝色梯形块代表右边框宽度，对几个边距的宽度而言，它们之间的分界恰好是这个正方形的对角线所在的直线，如果里面的小正方形宽高无穷小（将shape样式定义中width和height的属性值均设为0），那么这个图形将是一个由四块不同颜色三角形拼接而成的图形，如上图右：

修改.shape1如下：

.shape1{

         height: 40px;

         width: 40px;

         border-right:50px solid green;

         border-bottom: 50px solid yellow;

    border-left: 50px solid blue; 

}

形成的图形如下图右

修改上面样式中边框的填充色为背景色或transparent，相当于切掉了该边框，这样可以组合为不同的三角形。将左、右边框的填充色为背景色或transparent，形成的三角形如上图右。

将修.shape1如下：

.shape1{

         height: 0;

         width: 0; 

         border-bottom: 50px solid yellow;

    border-left: 100px solid transparent;

}

形成的图形如下图右

将修.shape1如下：

.shape1{

         height: 0;

         width: 0; 

         border-bottom: 50px solid transparent;

        border-right: 50px solid green;

}

形成的三角形如上图右。

利用border-radius属性可以为元素设置圆角边框，这样可以绘制各种圆形。

修改.shape样式定义为：

.shape1 {

    width:100px;

    height:100px;

    background:red;

    border-radius:50%;

 }

形成的图形如下图右

修改.shape样式定义为：

.shape1 {

    width:100px;

    height:100px;

    background:red;

    border-radius:50%;

 }

形成的图形如下图右

修改.shape样式定义为：

.shape1 {

    width:100px;

    height:60px;

    background:red;

    border-radius:50%;

 }

形成的椭圆形如上图右。

待续 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/96997
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号