css -- border-style & border-width

已于 2022-05-30 13:15:43 修改
阅读量486 收藏 8
点赞数 1
分类专栏： 网页与布局 文章标签： css css3 html
于 2022-05-30 13:09:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43964866/article/details/122504613
版权

碎碎念：学习过程中的一些体会，如果有什么不对的感谢大家指正一起学习！侵删！

border基本用法

1.常用8种border-style枚举

在这里插入图片描述

2. border-width

  1. 普通单位：px, rem, em
  2. 关键字单位：thick，medium ，thin
thickmediumthin
粗的中等的（默认值）细的
5px3px1px

3. border单独设置每条边

  1. 镂空
    在这里插入图片描述
  2. 不镂空
    在这里插入图片描述

4. 使用border绘制图形

4.1 三角形实现方法一

实现思路：设置想要的三角形图形，给该边设置颜色，其他边透明色

  1. 向上三角形
    在这里插入图片描述

  2. 向下三角形
    在这里插入图片描述

  3. 向左三角形
    在这里插入图片描述

  4. 向右三角形
    在这里插入图片描述

  5. 左上三角形
    在这里插入图片描述

  6. 右上三角形
    在这里插入图片描述

  7. 左下三角形
    在这里插入图片描述

  8. 右下三角形
    在这里插入图片描述

4.2 三角形实现方法二

实现思路：只设置某一个边与相邻边的宽度，相邻边颜色透明
优点：不占位

  1. 向上三角形
    在这里插入图片描述

  2. 向下三角形
    在这里插入图片描述

  3. 向左三角形
    在这里插入图片描述

  4. 向右三角形
    在这里插入图片描述

  5. 左上三角形
    在这里插入图片描述

  6. 右上三角形
    在这里插入图片描述

  7. 左下三角形
    在这里插入图片描述

  8. 右下三角形
    在这里插入图片描述

4.3 border实现各种形状

  1. 小箭头

实现思路：在样式一的基础上叠加一个三角形， 设置好叠加的颜色和位置即可
在这里插入图片描述

  1. 等腰三角形（写法一）
    在这里插入图片描述

  2. 等腰三角行（写法二）
    在这里插入图片描述

  3. 对话框下边角

实现思路：两个三角形叠加， 设置好叠加的颜色和位置即可
在这里插入图片描述


// html 

<body>
    <div>
    </div>
</body>

// css
      div {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            margin: 20px;
        }

        div::after,
        div::before {
            content: '';
            position: absolute;
            left: 160px;
            width: 0;
            height: 0;
            border: 20px solid;
            border-bottom-width: 0;
        }

        div::before {
            top: 122px;
            border-color: pink transparent transparent transparent;
        }

        div::after {
            top: 121px;
            border-color: #fff transparent transparent transparent;
        }
  1. 边框三角形

实现思路：两个三角形叠加， 设置好叠加的颜色和位置即可

在这里插入图片描述
6. 梯形
在这里插入图片描述

某些开发
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端入门到实战：11种常用css样式之border
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-10 1510
边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/边框宽度/,2.border-style/边框样式/,3.border-color/边框色彩/三大属性构成构成; border边框方位分为border-top/边框上方/border-bottom/边框底部/border-left/边框左边/border-r...
CSS border-width
broken_promise的博客
02-27 1078
border-width值得一看，我写之前也没发现这个属性有什么好留意的地方
CSS border-style 属性
thewebcode
06-16 272
CSS 参考手册 定义和用法 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 只有当这个值不是 none 时边框才可能出现。 例子 1 border-style:dotted solid double dashed; 上边框是点状 右边框是实线 下边框是双线 左边框是虚线 例子 2 border-style:dotted solid...
css3 border-style,CSS属性参考 | border-style
weixin_36473398的博客
08-04 5215
在CSS中有9种预定义的边框样式，这些边框样式与9个边框关键字一一对应。border-style属性的值可以设置为一个，两个，三个或四个。如果为border-style属性设置了一个值，那么元素的4条边框都使用这个值来指定样式。如果为border-style属性设置了两个值，那么第一个值指定元素的上下边框的样式，第二个值指定元素的左右边框的样式。如果为border-style属性设置了三个值，那么...
css中border width属性,CSSborder-width属性使用教程
weixin_39942318的博客
08-04 1368
当前位置：Gxlcms > css > CSSborder-width属性使用教程CSSborder-width属性使用教程时间：2021-07-01 10:21:17 帮助过：71人阅读border-width -- 定义四个边框的宽度取值:{1,4} | inherit{1,4}: 边框宽度(可以有一个,两个,三个或四个值)in...
CSS border-width 属性使用教程
09-25
**CSS `border-width`属性详解** `border-width`属性在CSS中用于定义元素边框的宽度，它允许你精确...结合其他边框属性（如`border-style`和`border-color`），你可以创建出各种各样的边框效果，满足不同的设计需求。
CSS border-style 属性使用方法
09-25
border-style -- 定义边框的样式 取值:<border>{1,4} | inherit <border>{1,4}: 边框样式 inherit: 继承 初始值: none 继承性: 否 适用于: 所有元素 border:边框,style:样式 border-style和border-width的赋值方式是...
详解CSS3中border-image的使用
09-25
例如，如果你想让边框随着`border-width`的变化而改变，你可以结合`border-width`和`border-image`一起使用，确保`border-style`设置为`solid`或其他非`none`值。 例如，一个简单的例子： ```css div { border-...
详解css样式中的border-image
09-24
在CSS样式中，`border-image` 是一个强大的特性，它允许你使用图像来定义元素的边框，从而创建出各种复杂且美观的边框效果。本文将深入解析`border-image`的相关属性及其用法。 首先，`border-image-source`属性...
css的border-style
笑一阁
04-16 593
1.none:表示沒有 2.solid：表示單綫 3.double：表示雙線 4.groove：表示凹槽 5.redge:表示皺紋 6.dotted:表示在windows等效solid 7.dashed:虛綫
CSS的Border属性 属性 边框 可以 定义 宽度 颜色 CSS solid 类型 文本
java猪舍
05-07 8671
制作过网页的人都有为画线而烦恼的经历，本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面把通过实例来说明其应用技巧。　　1、给文本加边框　　上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜
CSS border边框属性教程(color style)
weixin_30950607的博客
12-18 326
一、CSS边框基础知识 - TOP CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入DIVCSS5提供CSS手册查看border手册：http://www.divcss5.com/shouce/c_border.shtmlDIV+CSS边框border知识教程篇 二、Html原始边框与DIV+CSS边框对照 ...
CSS教程：学习border-style属性
willa_cainiao的专栏
01-15 350
 网页制作Webjx文章简介：border-style -- 定义边框的样式. border-style -- 定义边框的样式 取值:{1,4} | inherit {1,4}: 边框样式 inherit: 继承 初始值: none 继承性: 否 适用于: 所有元素 border:边框,style:样式 border-style和border-width的赋值方式是一样的,可以分别
CSS基础学习--9 边框（Border）
yyxhzdm的博客
06-12 2501
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。上面的例子用了很多属性来设置边框，你也可以在一个属性中设置边框。边框样式属性指定要显示什么样的边界。
【CSS Zoro 03】边框样式style 宽度width 颜色color 边top 简写边框border 圆角边框border-radius
Zane Boy's blogs
06-04 749
【CSS Zoro 03】边框样式style 宽度width 颜色color 边top 简写边框border 圆角边框border-radius border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）CSS border 属性允许指定元素边框的样式、宽度和颜色。border-color 属性用于设置四个边框的颜色。border-style属性指定需要显示的边框类型。border-width 属性指定四个边框的宽度。还有 border-right-style。
初学html第三篇章之css边框
weixin_44703686的博客
06-04 278
一、CSS边框： 1、CSS边框属性 border
CSS详细基础（六）边框样式
最新发布
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
09-29 648
本期是CSS基础的最后一篇~
FormBorderStyle 枚举
weixin_30291791的博客
05-11 88
C#窗体设计中的FormBorderStyle枚举 成员名称 说明 None 无边框。 FixedSingle 固定的单行边框。 Fixed3D 固定的三维边框。 FixedDialog 固定的对话框样式的粗边框。 Sizable 可调整大小的边框。 FixedToolWindow 不可调整大小的工具窗...
css零到一基础教程021：CSS 圆角边框
kerryqpw的博客
03-19 575
CSS 圆角边框 border-radius属性用于向元素添加圆角边框： <!DOCTYPE html> <html> <head> <style> p.normal { border: 2px solid red; } p.round1 { border: 2px solid red; border-radius: 5px; } p.round2 { border: 2px solid red; border-radiu..
css border-style属性
04-01
CSS border-style属性用于设置元素边框的样式。 语法： ``` border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; ``` 属性值： - none：没有边框 - hidden：与...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值