如何利用HTML5和CSS3设置四边边框border边界线

Posted 2023-04-03

直接用css属性值设置边线：border即可，还可以单独设置border-left，right，bottom，top。

用ccs3中的盒阴影设置，是一种固定写法： box-shadow：1px 1px red,inset 1px 1px red.

参考技术A border-top:1px solid #f00;
border-left:1px solid #f00;
border-right:1px solid #f00;
border-bottom:1px solid #f00;本回答被提问者采纳

如何将图像边框设置为图像的特定高度和宽度？ HTML / CSS

【中文标题】如何将图像边框设置为图像的特定高度和宽度？ HTML / CSS

【英文标题】：How to border image to a specific height & width to an image ? HTML / CSS

【发布时间】：2021-02-01 23:12:01

【问题描述】：

我在下面附上了一张图片，我想为它编写 CSS 来为图片提供从左到下的边框。我试过了，但我的代码是全边框

这是我想要的输出。

img
    border-top: 15px solid #faa633;
    border-right: 15px solid #faa633;
    border-left: 15px solid #faa633;

<img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="height: 400px;width: 300px">

【参考方案1】：

如果您只希望图像的两侧有边框，我建议您使用 box-shadow。

【参考方案2】：

保持边框透明并应用特定大小的渐变：

img 
  border: 15px solid transparent;
  background: 
    linear-gradient(#faa633, #faa633) 
    bottom left/ /* position */
    50% 40% /* width height */
    border-box no-repeat;

<img src="https://picsum.photos/id/10/200/150" >

【讨论】：

非常感谢兄弟。我可以获取您所指的 css 链接教程吗？对我有很大帮助