先上效果图：

html代码

css实现矩形边角加粗

css代码

body{

display: flex;

justify-content: center;

flex-direction: column;

align-items: center;

}

.main{

position: relative;

width: 400px;

height: 200px;

border: 1px solid red;

}

.main span:nth-child(1){

position: absolute;

left: -5px;

top: -5px;

padding: 15px;

border-style: solid;

border-color: rebeccapurple;

border-width: 5px 0 0 5px;

}

.main span:nth-child(2){

position: absolute;

right: -5px;

top: -5px;

padding: 15px;

border-style: solid;

border-color: rebeccapurple;

border-width: 5px 5px 0 0;

}

.main span:nth-child(3){

position: absolute;

right: -5px;

bottom: -5px;

padding: 15px;

border-style: solid;

border-color: rebeccapurple;

border-width: 0 5px 5px 0;

}

.main span:nth-child(4){

position: absolute;

left: -5px;

bottom: -5px;

padding: 15px;

border-style: solid;

border-color: rebeccapurple;

border-width: 0 0 5px 5px;

}

原理很简单，只要弄清position:relative,border和left,top之间的关系就可以了。

css全局加粗,CSS 实现矩形四个边角加粗的方法相关推荐

【Android 逆向】加壳技术简介 ( 动态加载 | 第一代加壳技术 - DEX 整体加固 | 第二代加壳技术 - 函数抽取 | 第三代加壳技术 - VMP / Dex2C | 动态库加壳技术 )
文章目录一.动态加载二.第一代加壳技术 ( DEX 整体加固 ) 三.第二代加壳技术 ( 函数抽取 ) 四.第三代加壳技术 ( Java 函数 -> Native 函数 ) 五.so 动态库 ...
linux字体加粗,CSS Fonts(字体)介绍
导读 CSS字体属性定义字体,加粗,大小,文字样式. serif和sans-serif字体之间的区别在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读 CSS字型在CSS中, ...
第二十四节：动态加载JS和动态加载CSS
1.动态加载JS 一般需要用到js,需要将js放到<script></<script>中,一般script放到页面底部:或者在顶部引入外部js. <!DOCTYPE ...
[css]我要用css画幅画(四)
接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...
html 设置统一样式,css 全局样式的定义
对css还是不熟悉,老是对全局样式无从下手. 从网易拷了一份,学习了一下. body {margin:0; font:12px/1.5 \5b8b\4f53,Arial,sans-serif; bac ...
ios html加载css样式,iOS加载HTML, CSS代码
NSString *strHTML = @" // NSString *strHTML = model.goods_datails; NSMutableString *targerStr = ...
webpack加载css样式 ----css相关loader
一.什么是loader? webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力. loader 让 webpack 能够去处理其他类型的文件,并 ...
jsp引入css失败,jsp加载css失败的原因
jsp加载css失败的原因:1.css文件语法写错:2.css文件编码出错:3.加载css文件路径不对:4.设置了过滤器:其解决办法:1.检查css语法:2.将css文件保存为UTF8格式:3.设置正 ...
h5前端开发，CSS全局样式
第一章 HTML(★★) 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 2.HTML5的优点与缺点? 3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 4.HTML5有哪些 ...
怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...

css全局加粗,CSS 实现矩形四个边角加粗的方法

css实现矩形边角加粗

css全局加粗,CSS 实现矩形四个边角加粗的方法相关推荐

最新文章

热门文章