CSS3的边框（border）属性-color

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量138 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/xiaobaiyang/articles/4449741.html
版权

首先来介绍第一个：Border-color

有css基础的同学肯定知道这个是设置它边框的一个属性：

首先看下它的语法：

border-color ： <color>

相关属性 ：border-top-color, border-right-color, border-bottom-color , border-left-color

看下它的取值：

<color>:颜色值；

现在把我写的代码附上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Tencent-ISRD" />
<meta name="Copyright" content="Tencent" />

<title>边框属性-颜色</title>
</head>
<body>
<div style="border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;">
在Firefox浏览器里能看到边框颜色渐变效果</div>
</body>

</body>
</html>

转载于:https://www.cnblogs.com/xiaobaiyang/articles/4449741.html

weixin_34082789
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3 border-style,CSS属性参考 | border-style
weixin_36473398的博客
08-04 5240
在CSS中有9种预定义的边框样式，这些边框样式与9个边框关键字一一对应。border-style属性的值可以设置为一个，两个，三个或四个。如果为border-style属性设置了一个值，那么元素的4条边框都使用这个值来指定样式。如果为border-style属性设置了两个值，那么第一个值指定元素的上下边框的样式，第二个值指定元素的左右边框的样式。如果为border-style属性设置了三个值，那么...
CSS3之border-color属性
牛栏山矿泉水
01-05 280
1、border-color （1）border-top-color：边框上部颜色 （2）border-bottom-color：边框下部颜色 （3）border-left-color：边框左部颜色 （4）border-right-color：边框右部颜色 2、浏览器兼容性 （1）IE6、7、8不兼容 （2）火狐2.0不兼容 （3）Chrome 1.0和2.0不兼容 3、属性举例...
border html5样式,CSS属性参考 | border-color
weixin_35870390的博客
06-15 1677
border-color属性是用于设置一个元素的上右下左4个边框颜色的简写属性。border-color属性可以同时设置一个元素的border-left-color、border-right-color、border-top-color和border-bottom-color属性。border-color属性的值可以是1个、2个、3个或4个。如果为border-color属性设置一个值，那么上下左...
CSS 基础：border 的 3 个基础属性和简写方法
u013179804的博客
04-10 5035
你好，我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集264篇原创内容-gzh后台回复“”可获取开发工具，持续更新中后台回复“”可得到前端基础100题汇总，持续更新中border（边框）是 CSS 中用来装饰元素周围区域的样式属性，主要作用是美化页面元素并提供视觉分隔效果。那我们一起来看一看它的基础属性，简写方法吧。
11.盒子属性
potato123232的博客
03-01 2140
盒子属性的常用css有边框，外边距，内边距与内容 上面这张图中border是边框，padding是内边距，margin是外边距，中间的1903 x 149是内容(content) 大部分的元素都可以使用盒子属性，不只有div可以使用 1边框 border 边框主要由三部分构成，边框宽度(粗细)(border-width)，边框样式(border-style)与边框颜色(border-color)，我们先感受一下 1.1border-color与border-width bord....
border-color属性设置单边边框和综合四边边框颜色
zy1992As的博客
06-08 6621
Web前端培训实操环节中，同学们经常会遇到边框的颜色设置问题。border-color属性用于设置边框的颜色，其取值可为预定义的颜色英文单词(如red、blue)、十六进制颜色值#RRGGBB(如#FF0000或#F00)或RGB模式rgb(r,g,b)(如rgb(0,255,0)括号里是颜色色值或百分比)，实际工作中最常用的是十六进制颜色值。...
CSS中的边框属性：border、border-width、border-color、border-style 详解
一起coding，一起嗨。
06-24 658
CSS中的边框属性：border、border-width、border-color、border-style 详解
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 1488
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
CSS3- css3新增样式（圆角边框border-radius、边框图片border-image、盒子阴影box-shadow）
weixin_48728769的博客
10-28 2237
CSS3- css3新增样式（圆角边框border-radius、边框图片border-image、盒子阴影box-shadow）
CSS border-color 属性使用方法
09-27
`border-color` 是CSS中的一个重要属性，它用于定义元素边框的颜色。通过此属性，你可以独立地为元素的上、右、下、左边框设置不同的颜色，从而实现丰富的视觉效果。让我们深入探讨一下这个属性的各个方面。 **语法...
CSS3之边框多颜色Border-color属性使用示例
12-08
在CSS3中，为了实现边框多颜色的效果，我们需要使用浏览器特定的前缀来扩展`border-color`属性。目前，这些前缀主要是 `-moz-` 和 `-webkit-`，分别对应Firefox和旧版WebKit浏览器（如Safari和Chrome）的私有属性。...
CSS3教程(3):border-color网页边框色彩
12-12
使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将...
XHTML 简介
lly202406的博客
08-09 402
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
mediapipe-0.8.8.1-cp39-cp39-manylinux_2_17_x86_64.whl
08-11
mediapipe-0.8.8.1-cp39-cp39-manylinux_2_17_x86_64.whl
python爱心代码高级
08-11
1. 一行代码画爱心 print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0.05)**2*(y*0.1)**3<=0 else' ')for x in range(-30,30)])for y in range(15,-15,-1)])) 效果图 2. 用turtle库画爱心加文字 import turtle import math turtle.pen() t=turtle t.up() t.goto(0,150) t.down() t.color('red') t.begin_fill() t.fillcolor('red') t.speed(1) t.left(45) t.forward(150) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(100) t.right(45) t.forward(250+math.sqrt(2)*100) t.right (90) t
mediapipe-0.8.9.1-cp38-cp38-win_amd64.whl
08-11
mediapipe-0.8.9.1-cp38-cp38-win_amd64.whl
开发资料技术资料USB设备驱动开发深度解析-宋宝华非常好的技术资料.zip
08-11
开发资料技术资料USB设备驱动开发深度解析-宋宝华非常好的技术资料.zip
高校二手交易平台.zip
最新发布
08-11
高校二手交易平台的主要使用者分为管理员和用户，实现功能包括管理员：个人中心、用户管理、商品上架管理、订单信息管理、商品信息管理、联系商家管理、论坛管理、管理员管理、系统管理，用户：个人中心、商品上架管理、订单信息管理、商品信息管理、联系商家管理、我的收藏管理，前台首页；首页、商品信息、论坛信息、新闻资讯、我的、跳转到后台、客服等功能。由于本网站的功能模块设计比较全面，所以使得整个高校二手交易平台信息管理的过程得以实现。 本系统的使用可以实现本高校二手交易平台管理的信息化，可以方便管理员进行更加方便快捷的管理。
多用户博客个人网站.zip
08-11
随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 个人网站，主要的模块包括查看；管理员；个人中心、博文类型管理、学生博客管理、学生管理、论坛信息、管理员管理、我的收藏管理、留言板管理、系统管理，学生；个人中心、学生博客管理、留言板管理、论坛信息、我的收藏管理、系统管理，前台首页；首页、博文类型、学生博客、论坛信息、新闻资讯、留言反馈、我的、跳转到后台、客服等功能。系统中管理员主要是为了安全有效地存储和管理各类信息，还可以对系统进行管理与更新维护等操作，并且对后台有相应的操作权限。 要想实现个人网站的各项功能，需要后台数据库的大力支持。管理员验证注册信息，收集的学生信息，并由此分析得出的关联信息等大量的数据都由数据库管理。本文中数据库服务器端采用了Mysql作为后台数据库，使Web与数据库紧密联系起来。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 本系统的开发使获取个人网站信息能够更加方便快捷，同时也使个人网站信息变的更加系统化、有序化。系统界面较友好，易于操作。
CSS边框风格详解：掌握border-style属性
CSS边框属性是Web前端设计中至关重要的组成部分，它用于控制网页元素的边界视觉呈现。本课程内容主要涵盖了以下几个关键知识点： 1. **边框风格属性（border-style）**： CSS的`border-style`属性用于设置元素边框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值