css零到一基础教程016：CSS 边框

最新推荐文章于 2024-04-25 18:36:27 发布
最新推荐文章于 2024-04-25 18:36:27 发布
阅读量327 收藏
点赞数
分类专栏： css零到一 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/123589784
版权
这篇教程详细介绍了CSS的border属性，包括如何定义边框的样式、宽度和颜色。重点讲解了border-style属性，列举了如dotted、dashed、solid等不同边框类型，并通过实例展示了各种边框样式的效果。请注意，只有设置border-style，其他边框属性才会生效。
摘要由CSDN通过智能技术生成

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

 

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值：

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

演示不同的边框样式：

 

p.dotted {border-style: dotted
了解本专栏 订阅专栏 解锁全文 超级会员免费看
慕容屠苏
关注
专栏目录
订阅专栏
css零到一基础教程018：CSS 边框颜色
kerryqpw的博客
03-19 1462
CSS 边框颜色 border-color属性用于设置四个边框的颜色。 可以通过以下方式设置颜色： name - 指定颜色名，比如 "red" HEX - 指定十六进制值，比如 "#ff0000" RGB - 指定 RGB 值，比如 "rgb(255,0,0)" HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)" transparent 注释：如果未设置border-color，则它将继承元素的颜色。 实例 演示不同的边框颜色： <!DOCTYPE h..
CSS Border(边框)
m0_68049714的博客
03-28 4505
每一个边框有3个方面：样式、宽度以及颜色： 边框样式：Border-style值: none:默认无边框 dotted:定义一个点线框 dashed:定义一个虚线框 solid:定义实现边界 double:定义两个边界。两个边界的宽度和border-width的值相同 groove:定义3D沟槽边界。效果取决于边界的颜色值 ridge:定义3D 脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset:定义一个3D突出边框。效果取决于边界的颜
css border 内边框
rockllee的博客
01-16 9176
box-sizing: border-box;
CSS之border
weixin_37745913的博客
03-12 387
border-width border-width是不支持百分比设置 border-width支持关键字：thin（1px）、medium（默认值，3px）、thick（5px） border-style border-style:solid ; 实线 border-style:dashed; 虚线（全部由小短线构成） border-style: dotted; 点线（全部...
CSS 边框样式
Serena_tz的博客
03-15 911
border-style 属性指定要显示的边框类型。 允许以下值： dotted - 定义点线边框 dashed - 定义虚线边框 solid - 定义实线边框 double - 定义双边框 groove - 定义 3D 坡口边框。效果取决于 border-color 值 ridge - 定义 3D 脊线边框。效果取决于 border-color 值 inset - 定义 3D inset 边框。效果取决于 border-color 值 outset - 定义 3D outset 边框。效果取决于 bord
HTML文本边框inside,css3新增边框、阴影、边框、背景、文本、字体，
weixin_36328628的博客
06-28 336
1 2 3 4 5 6 css3新增边框、阴影、背景、文本、字体7 8 /*border-radius:边框圆角 圆角直径*/9 div#ceshi{10 width:200px;11 height:200px;12 background-color:#f90;13 margin-bottom:50px;14 /*border-radius:...
css零到一基础教程019：CSS 边框各边
kerryqpw的博客
03-19 229
CSS 边框 - 单独的边 从上一章的例子中，您已经看到可以为每一侧指定不同的边框。 在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）： 实例 <!DOCTYPE html> <html> <head> <style> p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left
css零到一基础教程017：CSS 边框宽度
kerryqpw的博客
03-19 512
CSS 边框宽度 border-width 属性指定四个边框的宽度。 可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick： 实例 演示不同的边框宽度： p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; } p.three { border-st
css零到一基础教程021：CSS 圆角边框
kerryqpw的博客
03-19 606
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属性
张波的技术积累
01-08 6444
元素的边框一般用来分隔页面的各个部分，在CSS中，边框属性可以分为以下几个属性，包括边框样式(border-style)，边框宽度(border-width)， 边框颜色(border-color)以及边框综合属性(border)等。    顶部边框样式属性：        border-top-style: none | hidden| dotted | dashed | solid |
css如何将border线加到元素内部，占内边距，不占外边距
m0_64590669的博客
10-24 3034
css如何将border线加到元素内部，占内边距，不占外边距
CSS border边框（理解网页边框制作）
最新发布
百赢出品，必属精品
04-25 5432
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
css样式的border
weixin_45807622的博客
10-09 173
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ list-style-type: cjk-earthly-branch; list-style-image: url(img/icon.png); list-style-positi
html圆点边框颜色,css设置div边框颜色
weixin_42150360的博客
05-31 1030
div边框色调css设置装备摆设div边框色采使用css对div边框设置色采是思空见贯CSS花式设置装备摆设。对div边框颜色设置说需要css单词为border。去领会干系教程：《CSS边框》教程一、div四条边的边框颜色配置如果不设置边框宽度粗细，只配置border-color色彩将是有用的。一般咱们会简写边框名目代码。border:1px solid #F00这样简单设置装备摆设对象边框厚度...
border inset outset ,border-radius
weixin_30477293的博客
07-08 545
1、 例子： div{ width:256px; height:256px; border: 10px inset #f00; margin:0 auto; border-radius:255px; } inset 与outsetinset 就是border框内嵌效果 而outset相应的就是外凸效果 2、border-radius给DIV添加圆角 转载于:https:...
CSS边框，内外边距
2203_75410429的博客
12-14 493
图： border边款属性 1、属于复合属性 2、属性值：单个取值连写，空格隔开 如：border：1px solid red； solid：实线 dashed：虚线 dotted：电线 3、border边框单方面设置 属性明：border-方位名称 如：border-left：1px solid red； padding/margin：内/外边距属性 1、属于复合属性，可分别设置四个方向的内边距，设置顺序为：上右下左（顺时针） 如：padding：10px 20px 30p
css设置边框线样式
qq_47309504的博客
04-10 754
1、使用border-style属性，可通过不同的属性值来设置不同的边框线样式，例“dotted”点状，“solid”实线，“double”双线；使用border-style属性 border-style 属性用于设置元素边框的样式。2、使用border-image属性，为边框添加不同的背景图片来设置不同的边框线样式。使用图所示的这张90px×90px的图片作为边框的背景图片。border-image属性可以为边框添加背景图片。
CSS边框线型
CLC022109211210的博客
03-20 821
边框的8种线型
CSS基础教程：从入门到精通
本篇CSS基础教程旨在为初学者提供全面且实用的指导，作者ningzhisheng通过一系列深入浅出的讲解，帮助读者逐步掌握CSS的基础知识和应用技巧。教程共分为17个部分，从最基础的div+CSS页面布局开始，逐步介绍CSS的选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值