CSS容器的边框如何自定义样式？通过border属性设置宽度、颜色和样式

说白了，CSS边框定制的核心就靠大佬边框和它的兄弟姐妹了。
如果你想做一些花哨的事情，你就必须深入挖掘。

我们先来说说最重要的事情。
使用原始范围的范围缩写属性非常方便。
对于我们去年运行的一个项目，我们使用 .bordered-box{border:3 pxsolidblue} 通过一行代码来完成此任务，这比将其分解为四个子属性要容易得多。
另一点，如果您只想更改某一侧，例如为表格标题添加红色顶部边框，请使用 border-top:2 pxsolidred。
去年，一个竞争网站也做了同样的事情，效果立竿见影。
还有一个非常重要的细节。
3 D边框效果（凹槽/脊线等）取决于浏览器是否流行。
国内各大厂商的手机H5 页面几乎一模一样。

一开始我以为border-radius只能画圆，后来发现错了。
我使用 .pill-btn{border-radius:1 5 px} 作为胶囊按钮，它立即给我一种奢华的感觉。
等等，还有一件事。
分别控制四个角的半径是非常实用的，比如.tab{border-radius:01 0px}。
只有右下角是圆角的，这使得导航栏看起来很棒。

使用图像作为边框（border-image）是一种彩蛋级别的方法，但说实话，这相当棘手。
去年我们花了三天的时间调试才弄清楚 border-image-slice 的值。
建议先创建一个1 px的测试图片。
动态范围效应（CSS动画+JS）就更好了。
某电商活动页面使用JS监听滚动，边框颜色随之变化。
用户停留在原地的时间越长，颜色就越亮。
很多人不重视这一点。

最后，需要注意的是：边框图像在较低版本的 iOS 上会变得混乱，因此您需要事先对其进行测试。
建议将复杂的设计与 Sass 混合使用，而不是硬编码 5 0 行边框属性。

如何用css border控制元素边框大小

我记得有一次，当我进行网页设计时，我需要为导航栏添加边框。
我希望它的顶部和底部边框较厚，左侧和右侧边框较薄。
我尝试使用border-width来设置，发现设置为border-width: 3 px 1 px; 这个方法非常简单，只需几行代码即可完成。
但后来朋友告诉我，其实我可以更精确地控制每一边的边框大小，比如 border-top-width: 3 px; 右边框宽度：1 px； 边框底部宽度：3 px； 左边框宽度：1 px；。
虽然这样写需要多一点代码，但是边界控制更加精确。
我尝试了一下，效果非常好。
还有一件事，我突然想到，如果我以后设计一个网页，是不是也可以使用边框缩写属性来同时设置宽度、样式和颜色呢？ 这样，代码就会变得更加简洁。
等等，还有一件事，我还发现了一个小技巧，就是用关键字来设置边框宽度，比如thin、medium、thick，这样代码看起来更直观。
不过，我得想办法，怎样才能让边框既美观又实用，又不影响用户体验呢？