CSS:用border来构建图形

最新推荐文章于 2023-03-02 17:01:35 发布
最新推荐文章于 2023-03-02 17:01:35 发布
阅读量424 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42519137/article/details/86701823
版权

转自《css世界》

文章目录

border-style:dotted;实现ie8以下的圆角

这个属性在浏览器下是一个圆圈的边框；
无论是chrome还是firefox、ie，甚至ie7ie5都支持；
要知道border-radius是从ie9才支持的。
在这里插入图片描述
利用这个特点轻松实现一个兼容ie8一下浏览器的圆角图形；
    演示地址：
https://codepen.io/bb798sky/pen/qeKeOX
在这里插入图片描述

利用border-top:double和botrer-bottom:solid绘制常见的导航三道杠

    演示地址：
https://codepen.io/bb798sky/pen/rXKXjW
在这里插入图片描述

优雅的实现一个虚线上传照片的线框

    演示地址：
https://codepen.io/bb798sky/pen/MNXNEj

在这里插入图片描述

border实现倒三角

    演示地址：
https://codepen.io/bb798sky/pen/NQzQyW
在这里插入图片描述

withwz_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
msbuild-tailwindcss:通过postcsstailwind将构建动作添加到处理样式表
05-05
欢迎使用MSBuild TailwindCSS :waving_hand: 程序包添加了一个构建动作“ TailwindCSS”，该动作将标记的文件发送到配置了tailwindcss插件的postcss 激活的PostCSS插件： 尾风 套料 csnano 安装 可以通过检索扩展...
深入了解 border
p1967914901的博客
06-23 805
盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 分别对应 CSS 中的 、、和 属性，本文我们的主角是 border box。下面我们一起看看 都有哪些精彩的特性表现。虽然同属盒模型基本成员，但是 却不支持百分比。例如，设置： 是无效的，直接声明无效。这一点和 和 都不一样，下面问题来了：为什么 不支持百分比呢？顾名思义， 是“边框宽度”，我们先来看看现实世界的物体的边框，假设我们现在有两台数码设备，分别是 iMac 和 i
认识border
qq_53632966的博客
12-06 2126
认识border
css实现六角星
qq_39039128的博客
09-23 1224
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
[CSS]使用border绘制图形
CosecantY的博客
12-11 852
通常咱们写css的时候都是用border来写边框，但是今天发现可以用border来画一些特殊图形，比如三角形、梯形等一些特殊的图形。 下面来看例子 <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div>
CSS border画图
sj_wl的博客
06-03 289
普通border border: 1px solid red; 加粗点看看 border: 20px solid red; 每个边颜色不同 border-style: solid; border-width: 20px 20px 20px 20px; border-color: gold green blue red; 内容宽高为0时 width: 0px; height: 0px; border-style: solid; border-width: 50px 50px 50px 50px;
如何使用CSS的border属性来设置边框样式
最新发布
01-15
如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的...
js-css:使用 JavaScript 构建样式表
06-08
使用 JavaScript 构建样式表。 为什么 使用 JavaScript（例如 ）构建标记时，内联样式更具声明性。 但是内联样式也可能非常有限（没有伪元素或任何高级选择器）。 如何 这个库允许你使用 JavaScript 对象定义你的...
使用CSS的border属性构建变形边框的方法总结
09-24
border是最常用的用来制作各种各样div边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换:
flxgrid.css：在LESS上构建的可配置Flexbox网格
02-03
flxgrid.css：在LESS上构建的可配置Flexbox网格
border图形、网络字体、字体图标、精灵图
TianGog的博客
03-02 66
border主要是用来给盒子增加边框的，但是在开发中也可以利用边框的特性实现一些形状由以下代码可知border的四个方向的边框是四等分的.box {/*将边框作为盒子的一部分*/增大border，可将内部全覆盖.box {/*将边框作为盒子的一部分*/再将其余三个边框以及内部的的颜色改为透明就可得到一个三角形.box {/*将边框作为盒子的一部分*/
利用css样式画各种图形--初步、进阶、高级（一）
weixin_33754065的博客
02-17 431
 转文请注明：穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。 下面是我做测试的一些图形，也是参考了一些网站，简单的注解一下和归纳了一下，其中并没涉及到复...
利用css border画图案
qq_43039004的博客
12-03 212
.demo{ border-top: 100px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; width: 0px; height: 0px; } .demo{ border-top: 100px solid red; border-right: 50px solid blue; border-left..
border边框
qq_45142260的博客
11-14 464
元素的边框border属性 给元素设置边框，使用 border 属性 border-width 边框的宽度 border-color 边框的颜色 border-style 边框的样式 style的常见值 solid 是实线 dashed 虚线 dotted 圆点虚线 double 双实线 border 复合写法 width color style 例如： border：1px #f00 soli...
border属性
qq_41929578的博客
09-30 1万+
border属性及其应用 border 简写属性在一个声明设置所有的边框属性。 border: width style color 可以按顺序设置如下属性： border-width 1.可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等) 2.或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。 border-style 1.none: 默认无边框 2.dotted: 定义一个点线边框 3.dashed: 定义一个虚
利用css的border样式制作图形
u012317188的专栏
07-07 521
在今天之前，我对css的border属性的认知，只停留在border:5px solid red;但是今天发现border并不是一条直线或者矩形。所以跟大家分享下
CSS盒模型--边框设置：border: 1px solid red(像素 样式 颜色 )，border-bottom:1px dotted #ccc
热门推荐
12-16 7万+
盒模型--边框（一） 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是border代码的缩写形式，可以分开写： div{ border-width:2px; border-s
border
冉然的博客
06-08 484
1、取消border边框border-collapse: collapse;（必须添加，不然设置不起作用）border：0;其他问题，项目中遇到会随时记录
css中的border:dotted
05-15
可以通过设置 border-width 属性来调整边框的粗细，也可以使用 border-color 属性来设置边框的颜色。例如，下面的 CSS 代码会将一个元素的边框设置为红色的点状线： ``` border: 1px dotted red; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值