- 综合排序
- 最热优先
- 最新优先
- 来自专栏HaC的技术专栏
border:none，border:0
--css样式--> <style> .a{ border:none; //并不是隐藏边框，只是没有边框 } .b{ border-style:none; //表示无边框 ，即边框样式为无 border-width:0; //表示边框宽度为0 } <style> 以上两个类选择器a和b是一样的效果，border：none会被解析成border-style: none和border-width：0； 边框属性有以下几种（按顺序）： border{ border-width:1px; border-style:solide; border-color :red; } 其中border-style属性值一定不可省略，否则设置了如bord：10px也无法先边框。 写法应该是： border:1px solid red 再来看看性能的区别： border：0 浏览器对border-width，border-color进行了渲染，占用内存 border：none
1.3K20发布于 2020-12-30 - 来自专栏河湾欢儿的专栏
border样式
border样式 border: 10px dashed black; /复合样式 虚线有兼容问题/ border: 10px dotted black; /点划线有兼容问题/ border-top : 10px solid blueviolet; border-left: 10px solid red; border-right: 10px solid hotpink; border-bottom
1K30发布于 2018-09-06 - 来自专栏二猫の家
-webkit-border-radius和-moz-border-radius
w3标准的是border-radius， -webkit-border-radius 是为了兼容 chrome 或 safari， -moz-border-radius 是为了兼容火狐， 而现在火狐支持标准的 border-radius，所以-moz-border-radius 是个无用的属性。
95720编辑于 2022-11-30 - 来自专栏用户7873631的专栏
border-radius
padding: 0; } .father{ width: 200px; height: 200px; border : 1px solid #000; box-sizing: border-box; margin: 100px auto; /*border-radius : 100px 100px 100px 100px;*/ /*border-radius: 100px 100px 0px 0px;*/ border-radius border-radius: 左上 右上 右下 左下; 3.将正方形变为圆形的技巧 border-radius: 50%; 4.系统如何绘制圆角?
1.1K20发布于 2020-10-28 - 来自专栏用户7873631的专栏
详解： 23 border-radius以border为基点（变化点）
border-width: 20px 30px 0px 50px;代表上 右 下 左哈 border-color: pink blue pink blue;代表上 右 下 左哈 核心在于最核心来了 都是以border为基点的哈因为它叫做border-radius嘛是吧 <! */ #container .box2 { border: 20px solid red; border-radius: border-width: 20px 30px 0px 50px; border-color: pink blue red blue; } #container ; border-width: 60px 30px 60px 30px; border-color: pink blue pink blue
54330发布于 2020-10-28 - 来自专栏偏前端工程师的驿站
CSS魔法堂：重拾Border之——解构Border
《CSS魔法堂：重拾Border之——解构Border》 《CSS魔法堂：重拾Border之——图片作边框》 《CSS魔法堂：重拾Border之——不仅仅是圆角》 《CSS魔法堂：重拾Border 之——更广阔的遐想》 解构Border 说起border我们自然会想起border box，而border box由4条紧紧包裹着padding box的边(line)组成，所以border的最小操作单元是 |inset|outset){1,4} 默认值none，表示忽略border-color和border-width的属性值，打死不显示border。 <border-style> <border-color>? 其中<border-width>和<border-color>是可选，而<border-style>为必填项。 另外有4个子属性border-top/right/bottom/left:<border-width>? <border-style> <border-color>?
1.3K80发布于 2018-01-18 - 来自专栏技术集锦
【CSS】设置 border 长度
场景举例 如何实现 在线课程 字体下方的 短横线 样式效果 思考过程 1.常规方案 看到这样的样式效果，大多数人首先想到的一定是 border-bottom 吧，但是真正写在 css 中，你会发现， 效果是这样的 实现了，却又好像没实现，无法设置长度，那么下面我们试着换一种思路去实现这个效果 2.优化方案 我们不要把这个短横线看做 border ，使用 伪元素 实现，可以随意更改大小、宽度、长度等 宽度 */ width: 1000px; /* border 高度 */ height: 2px; background-color: #cccccc; /* border 位置 absolute(绝对定位) */ position: absolute; left: 295px; top: 705px; bottom: 918px ; /* 自动内减 */ box-sizing: border-box; } 通用格式 抽象上述代码为通用格式，日后可应用在其他场景下 selector:after {
3.3K20编辑于 2022-06-03 - 来自专栏Reck Zhang
ACMSGURU 133 - Border
Friends of Friends Problem Description Along the border between states A and B there are N defence outposts
49820发布于 2021-08-11 - 来自专栏艺述论专栏
10.7 border-width边框粗细：outline与border有什么不同？
border-width边框粗细：outline与border有什么不同？ border-width 属性可以设置盒子模型的边框宽度。 为什么线的粗细叫宽度？ 示例： border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; 简写语法 （仍然是四值语法）： border-width:5px ; border-width:20px 2px; border-width:5px 1px 6px; border-width:1px 3px 5px ; 简写语法： border-style:solid ; border-style:solid dotted; border-style:solid dotted dashed; border-style :solid dotted dashed double; border属性简写 在了解了border-width与border-style以后，接下来就可以使用border这个简写属性了。
2.9K30发布于 2020-10-26 - 来自专栏进击的君君的前端之路
CSS理解之border
border: 1px solid red;(border-width、border-style、border-color) 1.border-width不支持百分比 border-width你可以写成 .了解各种border-style类型 1.border-style: solid;实线 2.border-style: dashed; 虚线 3.border-style: dotted;点线 ? Paste_Image.png 3.border-color与color 一句话概括这两个css属性之间的关系那就是：border-color就是color，更准确的来讲就是border-color默认颜色就是 4.border与background定位 background定位的局限：只能相对左上角数值定位，不能相对右下角。 5.border与三角等图形构建 demo： <! Paste_Image.png 当把宽高都变为0时： div{ width:0; height:0; border:100px solid; border-color:red green
1.3K30发布于 2018-06-27 - 来自专栏前端小叙
css border不能同时设置圆角和 border-image
如标题，css border不能同时设置圆角和 border-image，当我想要实现既有圆角，并给圆角加 border-image的时候，发现无法同时生效，只有 border-image会生效。 : 1px solid; border-radius: 30px; padding: 15px 40px; } a:before { position : 1px solid; border-radius: 30px; border-image: linear-gradient(to right, #9f1a2c, #012069 ); -webkit-border-image: linear-gradient(to right, #9f1a2c, #012069); -o-border-image: linear-gradient (to right, #9f1a2c, #012069); border-image-slice: 10%; top: 0; left: 0; right
95030编辑于 2023-07-10 - 来自专栏小狐狸说事
Fancy Border Shape Generator
Fancy Border Shape Generator ---- 网站介绍 通过操纵border-radius生成各种形状，并且可以在项目的任何地方使用。 网站地址 https://9elements.github.io/fancy-border-radius/ ---- 声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。
68320编辑于 2022-11-17 - 来自专栏python3
css3 Border属性
css3中关于Border的属性一共有三个：圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性 的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴再X轴，具体看下面： border-top-left-radius （border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面） 圆角参考传送门 二、图片边框border-color 1、css2的border-color : <color> /*给左框上色*/ 2、css3的border-color属性 首先css3的border-color属性现在只有Firefox3.0+浏览器支持， 所以css3的border-color border-color参考传送门 三、边框多颜色border-p_w_picpath 1、语法 border-p_w_picpath ： none | <p_w_picpath> [ <number>
78420发布于 2020-01-13 - 来自专栏歪码行空
玩转 CSS Border-Image
代码： .border-image-demo { border: 150px solid transparent; border-image: url(. 其中border用于配置边框，border-image用于配置边框图像。具体的用法我们接下来会讲解。 题图效果 二、border-image 用法快速讲解 首先我们先了解一下border-image的简写语法，如下：<border-image-source> <border-image-slice>? <border-image-repeat>?。其中border-image-source是必须的，另外两个值可以省略。 border-image-width与border-image-outset配合 上图为 Chrome 下的截图效果，黄色区域为margin区域，其内侧很细的是我设定的4px的border。
1.4K20发布于 2020-04-07 - 来自专栏用户7873631的专栏
详解：26 border-image
: solid; border-width: 27px; } .box1 { border-image: */ /*并且·记住，要先在所在的父级元素中设置border-style:solid; border-width:27px;width: 400px; height: border-image-width: 27px; border-image-outset: 20px; border-image-repeat: space 记住哈，核心来了，兄弟们，四个角那里是不会有效果，算是border-image的盲点把 而黄色部分是有效果的哈，边框将border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image
71420发布于 2020-10-28 - 来自专栏用户7873631的专栏
详解：22 border-radius
代表左上角与右下角一样，右上角与左下角一样 记住：如果三个值的话，代表左上角 右上角 左下角 如果四个值的话，代表顺时针，从左上角----右上角—右下角—左下角 记住：border-top-left-radius } #container div { width: 100px; height: 100px; border { border-radius: 20px 40px;/*如果两个的话。 是左上角---右下角,然后是右上角----左下角*/ }`` .box4 { border-radius: 10px 20px 30px 40px;/*顺时针把，从左上角开始把*/ } .box6 { border-top-left-radius: 80px
86810发布于 2020-10-28 - 来自专栏用户7873631的专栏
css中border-radius
: 0; } .one { width: 200px; height: 100px; border /*/*可以通过border-xxx-xx-radius的方式单独设置某一个角的值 border-xxx-xx-radius接收两个参数, 第一个表示水平方向, 第二个表示垂直方向 border-xxx-xx-radius如果只传递了一个参数, 那么出自方向和水平方向的值一样*/ /* , 设置垂直方向为高度的一半*/ border-top-left-radius: 200px 100px; border-top-right-radius : 200px 100px; border-bottom-left-radius: 200px 100px; border-bottom-right-radius
88020发布于 2020-10-28 - 来自专栏技术分享交流
CSS 02 border-radius
auto; border-radius:50%; // border-radius: 50% 50% 50% 50%; } 画一个半圆 .demo{ width:200px; heigth ; } 画三角形和对话框案例 html css .sanjiao{ border-top:50px solid #ccc; border-top:50px solid #f00; border-top: auto; } CSS 02 border-radius插图 .sanjiao{ border-left:50px solid #ccc; border-top:50px solid transparent ; border-bottom:50px solid transparent; border-right:50px solid transparent; border:50px solid #ccc; :0px solid #6a6; border-top:50px solid transparent; border-bottom:50px solid transparent; border-right
92820编辑于 2023-02-13 - 一.问题重述 应用border-image后，border box与content ，麻烦留言告知，谢谢 border-image相关的部分如下： border: 10px solid; border-image: url(http://www.ayqy.net/temp/popup-white.png P.S.为了防止bug飞走，贴图记下： border-image 2倍图 border-image 1倍图 二.原因分析 又想起zxx那个铺地砖的例子： 这么比方吧，您从万科地产买了个99.5m*99.5m repeat/round，因为存在细线的问题，除非某一天Android 6.0也成为历史了 用box-shadow、border、border-radius、transform可以实现大部分相框，但border-image来自专栏黯羽轻扬
border-image诡异细线
写在前面 一个诡异的border-image问题，想了很久，如下： 微信实在粘不过来，想看的话下面有图，或者查看原文，或者浏览器打开原文： http://www.ayqy.net/blog/border-image ;">
可爱的popup
border、margin、padding属性的区别
可以先看下这个视频教程：http://my.tv.sohu.com/us/97014746/64226777.shtml
