当前位置:首页 > 前端技术 > html5如何设置边框颜色代码,css怎么设置边框的颜色?

html5如何设置边框颜色代码,css怎么设置边框的颜色?

2022年09月16日 19:11:41前端技术5

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力。下面我们来看一下css如何设置边框颜色。

html5如何设置边框颜色代码,css怎么设置边框的颜色? _ JavaClub全栈架构师技术笔记

css可以使用border-color属性设置四条边框的颜色。border-color属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为4个边分别设置不同的颜色。

css设置边框颜色:

p.one

{

border-style: solid;

border-color: #0000ff

}

p.two

{

border-style: solid;

border-color: #ff0000 #0000ff

}

p.three

{

border-style: solid;

border-color: #ff0000 #00ff00 #0000ff

}

p.four

{

border-style: solid;

border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)

}

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

注释:"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。

效果图:

html5如何设置边框颜色代码,css怎么设置边框的颜色? _ JavaClub全栈架构师技术笔记

border-color属性

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性,可设置一个元素的所有边框中可见部分的颜色,或者为 4 个边分别设置不同的颜色。

属性值:color_name 规定颜色值为颜色名称的边框颜色(比如 red)。

hex_number 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。

rgb_number 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。

transparent 默认值。边框颜色为透明。

inherit 规定应该从父元素继承边框颜色。

作者:爱过河的小马锅
来源链接:https://blog.csdn.net/weixin_42521558/article/details/117799047

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42194.html

标签: css
分享给朋友:

“html5如何设置边框颜色代码,css怎么设置边框的颜色?” 的相关文章

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

用HTML5/CSS3/JS开发Android/IOS应用

用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。  在...

Html/Css

原文地址:http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程...

HTML标签属性与CSS样式

HTML标签属性与CSS样式

HTML基础 定义:超文本标记语言 Hypetext Markup Language 特点: • 不需要编译,直接由浏览器执行 • 是一个文本文件 • 必须用htm或html作文件后缀 • 对大小写不敏感,HTML或html都可以 HT...

HTML-CSS标签属性注释大全

           ★文章有点长,但是我觉得你不用一次性看完,可以收藏一下,在自己的碎片时间里,可以随时拿出来看看。    ★今天把HTML里一些常用的标签也整理了一份,希望对于初学者有...

HTML中的form表单的标签、属性、属性值;  CSS以及HTML5新增属性、属性值

HTML中的form表单的标签、属性、属性值; CSS以及HTML5新增属性、属性值

form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。