`

CSS 边框 border的各种设置

 
阅读更多

 

边框 border 就三个 属性值,  width style 和 color ..

 

要是 四个值都有就是  : 上右下左  

 

三个值: 就是 上右下 

 

两个值 : 就是 上下 ,左右

 

一个的话: 就是 上下左右都是一样的咯 ,

 

看出来了吧 就是顺时针的顺序啦.

 

 

border-color:

 

 

可能的值

值 描述
color_name 规定颜色值为颜色名称的边框颜色(比如 red)。
hex_number 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。

 

border-width:

 

 

值 描述
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。

 

border-style:

 

 

值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit

规定应该从父元素继承边框样式。

分享到:
评论

相关推荐

    【 border虚线】CSS border虚线边框属性教程

    学习之路不可停止,最近在研究CSS,今天爱站技术频道的小编就給你们带来这篇CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的同学可以参考一下。

    如何使用CSS的border属性来设置边框样式

    如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的border属性来设置边框样式如何使用CSS的...

    css 边框上如何写入文字?

    ### CSS边框上写入文字的方法 #### 一、引言 在网页设计与开发过程中,经常需要通过CSS实现各种视觉效果,其中一种常见的需求就是在边框上添加文字。这不仅可以美化界面,还能提高用户体验。本文将详细介绍如何利用...

    css-border-effects.zip

    这个名为"css-border-effects.zip"的压缩包文件显然包含了关于CSS边框效果的学习资源,特别关注的是如何通过CSS来创建各种吸引人的边框效果。在网页设计中,边框不仅用于分隔内容,还可以增强视觉吸引力,提升用户...

    border虚线样式,带颜色

    当提到“border虚线样式,带颜色”时,我们主要关注的是如何在HTML和CSS中设置元素的边框为虚线,并且赋予其各种颜色,如红色、绿色或黄色。下面将详细介绍这一知识点。 首先,边框样式(border-style)属性允许...

    纯CSS3炫酷元素边框线条动画特效

    总的来说,“纯CSS3炫酷元素边框线条动画特效”是一种充分利用CSS3动画特性的技术,可以轻松创建出各种吸引眼球的边框动画,而无需额外的JavaScript代码。通过灵活组合和创新,开发者可以打造出无数种独特的视觉效果...

    css制作带箭头的css边框

    ### CSS制作带箭头的CSS边框 #### 知识点概述 本示例通过纯CSS技术实现了一个带有箭头的边框效果,无需使用任何背景图片,这为网页设计提供了一种轻量级且易于维护的方法。此方法主要利用了CSS中的伪元素以及边框...

    CSS3边框动画

    CSS3中的`border`属性允许我们为元素定义边框的宽度、样式和颜色。通过结合`transition`和`animation`属性,我们可以创造出各种动态的边框效果。`transition`用于平滑地改变一个或多个属性,而`animation`则可以定义...

    纯css块边框流动线条效果

    用css实现边框流动光线效果.........................................................................................

    css-border:css实现花里胡哨边框特效

    `border`是CSS中一个非常基础且重要的属性,用于设置元素的边框。它包含三个部分:宽度(`border-width`)、样式(`border-style`)和颜色(`border-color`)。例如: ```css element { border-width: 2px; ...

    css+div实现各种常见边框.zip

    首先,CSS中的边框属性包括`border-width`、`border-style`和`border-color`,它们分别用于设置边框的宽度、样式和颜色。例如,要创建一个红色、实线、宽度为2像素的边框,可以这样写: ```css div { border-width...

    tailwindcss-border-gradient-radius:用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序一起使用

    基于 background-origin 和 background-image 的 Tailwind CSS 边框渐变插件 用于生成边框渐变的 Tailwind CSS 插件可以与圆形实用程序类一起使用。 该插件基于 。 看看它的实际效果: : 要求 此插件需要 ...

    第17章 CSS边框与背景[上].pdf

    在HTML5中,CSS边框和背景是网页布局和设计中非常重要的视觉元素,它们...通过本次课程的学习,相信学习者可以更好地掌握CSS边框与背景的样式设置,并将其应用于实际的网页设计工作中,提升网页的视觉效果和用户体验。

    css3(border-radius)边框圆角详解

    CSS3 中的 border-radius 属性可以生成圆角边框,无需使用图片背景图案,从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...

    css设置边框渐变色

    使用css设置按钮边框的渐变色;使用css设置按钮边框的渐变色

    CSS 边框.docx

    在实际应用中,开发者可以结合这些边框属性创造各种效果,比如使用`border-radius`设置圆角边框,或者利用`box-shadow`添加阴影效果,进一步增强元素的视觉吸引力。 总结来说,CSS边框是CSS布局的重要组成部分,...

    CSS——border基础知识.docx

    在实际应用中,CSS边框常用于创建各种视觉效果,如按钮、卡片、提示框等。通过结合其他CSS属性,如盒模型、背景色和过渡效果,可以实现更复杂的布局和动态效果。 总之,理解并熟练掌握CSS边框的使用对于创建美观、...

    css border 虚线的使用方法.docx

    CSS3 中引入了 border-image 属性,可以用于设置更复杂的边框样式。border-image 属性可以取一个或多个值,分别对应四个方向的边框样式。 例如,以下 CSS 代码将创建一个使用图片的虚线边框: ```css border-image...

    css边框.docx

    通过灵活运用这些CSS边框属性,我们可以创建出各种复杂且富有视觉效果的网页布局。这些例子展示了如何设置不同边框的样式、宽度和颜色,以及如何使用简写属性提高代码的效率。熟练掌握这些技巧,将有助于提升网页...

Global site tag (gtag.js) - Google Analytics