- 综合排序
- 最热优先
- 最新优先
- 来自专栏艺述论专栏
10.6 border-color简写属性：如何理解四值语法？
border-color简写属性：如何理解四值语法？ border-color 是一个用于设置元素四个边框颜色的快捷，或者说是简写属性：border-top-color, border-right-color, border-bottom-color, border-left-color border-color是一个简写样式属性。 四个边框为同一颜色 border-color:#eeff34; 二个：上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000; 三个：上边框颜色： #369 左、右边框颜色：#000 下边框颜色：#f00 border-color:#369 #000 #f00; 四个：上、右、下、左边框颜色：#369、#000、#f00、#00f border-color
1.1K10发布于 2020-10-26 - 来自专栏SnailTyan
Bootstrap中的color，bgcolor，background-clor，border-color
style在颜色控制方面有许多，这里主要说一下color，bgcolor，background-color，border-color的区别。 border-color border-color顾名思义，它主要是用来设置控件的边框颜色。 用法举例： <input type="button" value="123" id="test" class="btn" style="color: blue;background-color: blue;<em>border-color</em>
87920发布于 2019-05-25 - 来自专栏sktj
table 常用样式
table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color url('cell-blue.jpg'); border-width: 1px; padding: 8px; border-style: solid; border-color url('cell-grey.jpg'); border-width: 1px; padding: 8px; border-style: solid; border-color verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color
64620编辑于 2022-01-10 - 来自专栏杨龙飞前端
css3动画知识
:rgb(255,65,34);} 66% {width:20px;height:20px;border-radius:50%;background:rgb(255,65,34);border-color :white;} 33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34 );} 0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color :white;} 33% {width:20px;height:20px;border-radius:50%;background: yellow;border-color:rgb(255,65,34 );} 0% {width:20px;height:20px;border-radius:50%;background: yellow;visibility: visible;border-color
1.1K70发布于 2018-05-15 - 来自专栏前端达人
只用1个div，你能用CSS常规属性绘制：正3、4、5、6、7、8边形吗？
.a{ width:0; height:0; border-width:0 50px 87px ; border-style:solid; border-color background:#c00; } .b{ width:0; height:0; border-width:50px; border-style:solid; border-color :#095; } .c{ width:100px; height:0; border-width:0 0 100px; border-style:solid; border-color 100px; height:0; background:none; border-width:95px 31px 0; border-style:solid; border-color :relative; width:100px; height:0; border-width:0 50px 87px; border-style:solid; border-color
1.6K30发布于 2019-08-16 - 来自专栏站长的编程笔记
【说站】百变鹏仔缤纷文字广告位代码美化版
tp-ad-text1 a:nth-child(2n) {color:#f74e1e;} .tp-ad-text1 a:nth-child(2n):hover {background:#f74e1e;border-color tp-ad-text1 a:nth-child(3n) {color:#00a4ef;} .tp-ad-text1 a:nth-child(3n):hover {background:#00a4ef;border-color tp-ad-text1 a:nth-child(4n) {color:#0517c2;} .tp-ad-text1 a:nth-child(4n):hover {background:#0517c2;border-color tp-ad-text1 a:nth-child(5n) {color:#601165;} .tp-ad-text1 a:nth-child(5n):hover {background:#601165;border-color tp-ad-text1 a:nth-child(6n) {color:#ffb900;} .tp-ad-text1 a:nth-child(6n):hover {background:#ffb900;border-color
49010编辑于 2022-11-28 - 来自专栏用户7873631的专栏
LESS第五课（匹配模式 导入其他的less文件）
border-style:solid solid solid solid; } .triangle(Down,@width,@color) { border-width:@width; border-color :@color transparent transparent transparent ; } .triangle() { border-width:@width; border-color transparent @color transparent; } .triangle(Left,@width,@color) { border-width:@width; border-color */ div { width: 0; height: 0; border-style: solid solid solid solid; border-width: 80px; border-color { //width: 0; //height: 0; border-width: @width; //border-style: solid solid solid solid; border-color
76120发布于 2020-10-28 - 来自专栏Python 爬虫
【JS逆向百例】某 _rand DOM 检测分析：CSS 动画终态与样式回读
.____1595618{color:white;background:darkorange;border-color:teal;animation:1mslinear1ms1reversebackwardsrunning ____322645}}","@media(max-width:8px){.____159565{color:brown;background:black;border-color:brown;animation :1mslinear1ms1normalbackwardsrunning____322646}.____1595619{color:cyan;background:darksalmon;border-color (border-width:medium))and((not(overflow:hidden))))){.____159566{color:lime;background:darkgoldenrod;border-color not(overflow:hidden))and((not(display:table-flex))){.____1595617{color:lightblue;background:fuchsia;border-color
13410编辑于 2026-04-07 - 来自专栏前端进阶交流
一篇文章带你了解CSS 边框(Border)
边框可以是预定义的样式，例如实线，双线，虚线等，[也可以是图像]，定义边框的样式（border-style），颜色（border-color）和厚度（border-width）。 1. 边框颜色属性 (border-color) 该border-color属性指定color框的边框。这也是用于设置元素边框所有四个侧面的颜色的简写属性。 例： <style> p.one { border-style: solid; border-color: #ff0000; } p.two { border-style: solid; border-color { border-style: solid; border-color: #ff0000 #00ff00 #0000ff #ff00ff; } </style> 注意： border-color如果单独使用该属性 注： border-color在设置元素的边框时，如果缺少属性值或未指定属性值（例如border: 5px solid;），则该元素的color属性将用作的值border-color。
1.1K10发布于 2021-02-04 - 来自专栏进击的君君的前端之路
CSS理解之border
border: 1px solid red;(border-width、border-style、border-color) 1.border-width不支持百分比 border-width你可以写成 Paste_Image.png 3.border-color与color 一句话概括这两个css属性之间的关系那就是：border-color就是color，更准确的来讲就是border-color默认颜色就是 color，当没有指定border-color的时候，会使用color作为边框色。 Paste_Image.png 当把宽高都变为0时： div{ width:0; height:0; border:100px solid; border-color:red green Paste_Image.png 把左和下三角颜色变为透明，右三角变为红色： div{ width:0; height:0; border:100px solid; border-color
1.3K30发布于 2018-06-27 - 来自专栏海轰轰的学习笔记
「HTML+CSS」--自定义加载动画【038】
/* 红色边框仅作提示 */ border: 2px solid red; } span { border: 48px solid; border-radius: 50%; /* border-color position: relative; animation: animloader 2s linear infinite; } @keyframes animloader { 0% { border-color 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.75); } 33% { border-color 0.75) rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35); } 66% { border-color 代码如下 animation: animloader 2s linear infinite; /*动画实现*/ @keyframes animloader { 0% { border-color
30320发布于 2021-06-10 - 来自专栏全栈程序员必看
table css样式_html table居中
font-family:verdana,arial,sans-serif; 10 font-size:11px; 11 color:#333333; 12 border-width:1px; 13 border-color collapse; 15 } 16 table.gridtable th{ 17 border-width:1px; 18 padding:8px; 19 border-style:solid; 20 border-color dedede; 22 } 23 table.gridtable td{ 24 border-width:1px; 25 padding:8px; 26 border-style:solid; 27 border-color font-family:verdana,arial,sans-serif; 35 font-size:11px; 36 color:#333333; 37 border-width:1px; 38 border-color font-family:verdana,arial,sans-serif; 60 font-size:11px; 61 color:#333333; 62 border-width:1px; 63 border-color
4.6K30编辑于 2022-11-08 - 来自专栏用户7873631的专栏
sass的条件判断篇
height: 0; border-width: $width; border-style: solid solid solid solid; @if($dir==Up) { border-color : transparent transparent transparent transparent; } @else if($dir==Down) { border-color : $color transparent transparent transparent; } @else if($dir==Left) { border-color: transparent $color transparent transparent } @else if($dir==Right) { border-color: transparent transparent / div { width: 0; height: 0; border-width: 50px; border-style: solid solid solid solid; border-color
1K20发布于 2020-10-28 - 来自专栏小何の个人博客
分享一组好看的按钮样式（纯CSS）
font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color ;border-radius:1px;background-color:#b57dff;} .biaoq1:hover{ color:#ffffff;background-color:#888888;border-color font-size:12px;padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;border-width:1px;border-color ;border-radius:1px;background-color:#465efb;} .biaoq2:hover{ color:#ffffff;background-color:#888888;border-color ;border-radius:1px;background-color:#f9bb3c;} .biaoq3:hover{ color:#ffffff;background-color:#888888;border-color
2.5K10编辑于 2023-03-09 - 来自专栏前端说吧
CSS-border属性制作小三角
1——三角向上下左上、右上、右下、左下这四个方向突出的样式 向左上角突出: border-color: transparent transparent transparent #FFCC00; border-style :dashed dashed solid solid; border-width: 0 0 30px 30px ; 向右上角突出： border-color: #FFCC00 transparent transparent transparent; border-style:solid dashed dashed solid; border-width: 30px 0 0 30px; ：如下代码显示， border-color transparent transparent; border-style:solid solid dashed dashed; border-width:30px 30px 0 0 ; 向左下角突出： border-color :#b182e9 #60c69d #e37076 #776ee2; border-style:solid; border-width:30px; 3：其他好玩的尝试： border-color: transparent
91350发布于 2018-05-17 - 来自专栏海轰轰的学习笔记
「HTML+CSS」--自定义加载动画【026】
20px solid; animation: animloader 2s linear infinite alternate; } @keyframes animloader { 0% { border-color : rgba(255,255,255, 1) rgba(255,255,255, 0) rgba(255,255,255, 0) rgba(255,255,255, 0);} 33% { border-color : rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 0) rgba(255,255,255, 0);} 66% { border-color : rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 1) rgba(255,255,255, 0);} 100% { border-color 代码如下 animation: animloader 2s linear infinite ; /*动画实现*/ @keyframes animloader { /*第一帧*/ 0% { border-color
37720发布于 2021-05-07 - 来自专栏『学习与分享之旅』
less中的匹配模式
border-width: 40px 40px 40px 40px; border-style: solid solid solid solid; border-color width: 0; height: 0; border-width: 40px 40px 40px 40px; border-style: solid solid solid solid; border-color width, @color) { width: 0; height: 0; border-width: @width; border-style: solid solid solid solid; border-color ; border-style: solid solid solid solid;}.triangle(Down, @width, @color) { border-width: @width; border-color color transparent transparent transparent;}.triangle(Top, @width, @color) { border-width: @width; border-color
1.5K20编辑于 2023-09-29 - 来自专栏前端资源
纯CSS绘制三角形、梯形及border属性的延伸
A1*/ .triangle1 { width: 0; height: 0; border-width: 50px; border-style: solid; border-color height: 0; border-width: 0 50px 100px 50px;/*上边框为0，下边框为100px*/ border-style: solid; border-color 其效果取决于 border-color 的值。 ridge 3D 垄状边框。其效果取决于 border-color 的值。 inset 3D inset 边框。 其效果取决于 border-color 的值。 outset 3D outset 边框。其效果取决于 border-color 的值。 inherit 从父元素继承边框样式。 border-color 边框的颜色。 用法也与 border-width 类似，边框颜色有以下几种： color_name 颜色值为颜色名称的边框颜色（比如 red）。
2.8K21发布于 2019-11-12 - 来自专栏阿年的数据梦
无脑用CSS制作三角形及高级应用，看完别说你还不会！
image.png 代码实现： .box1 { width: 100px; height: 100px; border: 50px solid; border-color image.png 代码实现： .box1 { width: 50px; height: 50px; border: 50px solid; border-color: 代码实现： .box1 { width : 0; height: 0; border: 50px solid; border-color: red blue image.png 代码实现： .box1 { width : 0; height: 0; border: 50px solid; border-color 颜色可以在border-color中修改成想要的颜色。 因此只需要把小三角形绝对定位到左边盒子的右边，修改成适当的大小，颜色改为右边盒子的颜色就可以实现那样的需求了。
79810发布于 2021-04-27 - 来自专栏全栈程序员必看
html 简单的table样式
; 10 font-size:11px; 11 color:#333333; 12 border-width: 1px; 13 border-color 17 border-width: 1px; 18 padding: 8px; 19 border-style: solid; 20 border-color 24 border-width: 1px; 25 padding: 8px; 26 border-style: solid; 27 border-color ; 35 font-size:11px; 36 color:#333333; 37 border-width: 1px; 38 border-color 43 border-width: 1px; 44 padding: 8px; 45 border-style: solid; 46 border-color
4K10编辑于 2022-09-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号