CSS轮廓outline

深碍√TFBOYSˉ_ 2021-09-15 04:40 292阅读 0赞

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

![70][]

![70 1][]

border:1px solid red;  
outline-style:dotted;

outline-color:\#00ff00;

![70 2][]

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

p {

border:1px solid red;

}

p.dotted {

outline-style:dotted

;}

p.dashed {

outline-style:dashed;

}

p.solid {

outline-style:solid;

}

p.double {

outline-style:double;

}

p.groove {

outline-style:groove;

}

p.ridge {

outline-style:ridge;

}

p.inset {

outline-style:inset;

}

p.outset {

outline-style:outset;

}

</style>

</head>

<body>

<p class="dotted">点线轮廓</p>

<p class="dashed">虚线轮廓</p>

<p class="solid">实线轮廓</p>

<p class="double">双线轮廓</p>

<p class="groove">凹槽轮廓</p>

<p class="ridge">垄状轮廓</p>

<p class="inset">嵌入轮廓</p>

<p class="outset">外凸轮廓</p>

<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>

</body>

</html>

![70 3][]

p.one

{

border:1px solid red;

outline-style:solid;

outline-width:thin;

}

p.two

{

border:1px solid red;

outline-style:dotted;

outline-width:3px;

}

</style>

</head>

<body>

<p class="one">This is some text in a paragraph.</p>

<p class="two">This is some text in a paragraph.</p>

![70 4][]

[70]: /images/20210813/8bac4bc6451543f899201052259c1ea0.png
[70 1]: /images/20210813/72980103faaf415c9eeb947b8ed90797.png
[70 2]: /images/20210813/f9ef546ca9864af7b460d506580c819b.png
[70 3]: /images/20210813/4afdfd9ecc2c4bf2b5c1c55485886942.png
[70 4]: /images/20210813/4056028a618343f695fd69588bf06434.png

发表评论取消回复

表情：

评论列表（有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

相关非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.10 盒子模型-外轮廓outline

非零基础自学前端最后一遍文章目录非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模

野性酷女/ 2024年03月26日 21:52/ 0 赞/ 95 阅读

相关微信小程序界面设计入门课程-样式wxss中使用css课程-outline轮廓

outline轮廓微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua

迷南。/ 2024年02月19日 16:01/ 0 赞/ 55 阅读

相关 html css 清除 button 选中时的边框样式 CSS outline属性

效果图一 ![在这里插入图片描述][2021012314570238.gif_pic_center] 目标图 ![在这里插入图片描述][202101231457193

ゞ浴缸里的玫瑰/ 2023年10月07日 15:32/ 0 赞/ 10 阅读

相关 css使用outline快速查看整个项目布局

在我们开发过程中，老是需要查看布局来修改，使用一个 CSS 技巧给所有元素加上 `outline`，这样就能迅速了解自己所需的元素位置信息。 css代码： body

约定不等于承诺〃/ 2023年06月26日 05:49/ 0 赞/ 12 阅读

相关 CSS的outline轮廓属性：轮廓属性

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不一定是矩形。 outline 简写属性在一个声明

心已赠人/ 2022年12月19日 08:52/ 0 赞/ 191 阅读

相关 CSS 轮廓偏移

CSS 轮廓偏移 ![在这里插入图片描述][20210325195957257.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

爱被打了一巴掌/ 2022年11月13日 05:20/ 0 赞/ 198 阅读

相关 CSS 轮廓

CSS 轮廓 ![在这里插入图片描述][20210325195822449.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5na

水深无声/ 2022年11月13日 05:20/ 0 赞/ 171 阅读

相关 css轮廓设置

轮廓（outline）是绘制于元素周围的一条线，位域边框的外围，可起到突出元素的作用。css轮廓设置用于规定元素轮廓的样式、颜色和宽度。 1、设置轮廓的颜色（outline-

柔情只为你懂/ 2022年06月06日 09:57/ 0 赞/ 263 阅读

相关【CSS】轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。轮廓（outlin

曾经终败给现在/ 2022年03月22日 08:26/ 0 赞/ 251 阅读

相关 CSS轮廓outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 ![70][]

深碍√TFBOYSˉ_/ 2021年09月15日 04:40/ 0 赞/ 293 阅读