- 所在位置：
- 首頁 >
- 編程技術(shù) >
- CSS/HTML >
- CSS中給矩形邊角加粗的效果怎么實現(xiàn)，原理是什么
CSS中給矩形邊角加粗的效果怎么實現(xiàn)，原理是什么
Admin 2022-07-09 群英技術(shù)資訊 860 次瀏覽
這篇文章主要介紹了CSS中給矩形邊角加粗的效果怎么實現(xiàn)，原理是什么相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS中給矩形邊角加粗的效果怎么實現(xiàn)，原理是什么文章都會有所收獲，下面我們一起來看看吧。1、工具/原料
- html
- css
2、具體實現(xiàn)
效果圖
html代碼
<body>
<h1 style="color: red">css實現(xiàn)矩形邊角加粗</h1>
<div class="main">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
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之間的關(guān)系就可以了
上述內(nèi)容具有一定的借鑒價值，感興趣的朋友可以參考，希望能對大家有幫助，想要了解更多"CSS中給矩形邊角加粗的效果怎么實現(xiàn)，原理是什么"的內(nèi)容，大家可以關(guān)注群英網(wǎng)絡(luò)的其它相關(guān)文章。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
CSS怎么實現(xiàn)半圓，原理及方法是什么
css怎么實現(xiàn)半圓？半圓半圓分為：上半圓、下半圓、左半圓、右半圓，我們只要學(xué)會制作某一個方向的半圓，其他方向的半圓都可以輕松實現(xiàn)，其原理都一樣。假如我們要制作上半圓，實現(xiàn)原理：
-
CSS的grid網(wǎng)格布局中有哪些基礎(chǔ)定義要了解
grid布局又稱為網(wǎng)格布局，可以實現(xiàn)二維布局方式。這是使用CSS控制的，不是使用HTML控制的，同時還可以依賴于媒體查詢根據(jù)不同的上下文得新定義布局。
-
用CSS如何制作氣泡框的三角形效果
實現(xiàn)的原來就是：在一個寬高為0像素的塊狀元素中設(shè)置border屬性，例如.box{width:0px;height:0;border-bottom:50px#F00solid;border-left:50px#03Fsolid;border-right:50px#F90solid;border-top:50px#6C0solid;}在瀏覽器中的顯示如圖：這樣就有上下左右四個三角形了，再把除了要用的三角外的其他3個三角（border）顏色設(shè)置 ...
-
用CSS怎么實現(xiàn)類似極光的效果，方法是什么
使用 CSS 還是可以作出類似極光的一些特效的，今天我們就一起來嘗試下。
-
CSS點擊邊框顏色改變的效果如何實現(xiàn)？
這篇文章給大家分享的是CSS點擊邊框顏色改變效果的實現(xiàn)。小編覺得挺實用的，有一定的參考借鑒價值，大家還可以做其他的點擊后邊框改變的效果，文中的示例代碼介紹得很詳細，有需要的朋友可以參考，接下來就跟隨小編一起了解看看吧。
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計算之旅
立即注冊關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
