當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

css3怎样实现边框凸起

發(fā)布時(shí)間：2023/12/31 综合教程 24 生活家

生活随笔收集整理的這篇文章主要介紹了 css3怎样实现边框凸起小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在css中，可以利用“border-style”屬性實(shí)現(xiàn)邊框凸起樣式，該屬性用于設(shè)置元素邊框的樣式，當(dāng)屬性的值為“outset”時(shí)，可以設(shè)置元素邊框?yàn)橥蛊穑Z(yǔ)法為“元素{border-style:outset;}”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3怎樣實(shí)現(xiàn)邊框凸起

在css中，沒想要實(shí)現(xiàn)邊框凸起的樣式，需要利用到border-style屬性。

border-style 屬性用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。

屬性值設(shè)置為outset時(shí)，定義 3D outset 邊框，也就是凸起的樣式

示例如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width:100px; height:100px; background-color:pink; border-style:outset; border-width:5px; } </style></head><body> <div></div></body></html>

輸出結(jié)果：

（學(xué)習(xí)視頻分享：css視頻教程）

總結(jié)

以上是生活随笔為你收集整理的css3怎样实现边框凸起的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

边框