日度归档:2020年1月6日

CSS如何在元素外部绘制轮廓(outline)的方法分享


摘要:
下文讲述使用css脚本对元素进行轮廓绘制的方法分享,如下所示:


轮廓简介:
轮廓是元素外围绘制一条线

轮廓可以使用以下属性进行相关设置

属性

属性功能

属性值
outline

在一个声明中设置所有的轮廓属性

outline-color
outline-style
outline-width
inherit
outline-color

设置轮廓的颜色

color-name
hex-number
rgb-number
invert
inherit
outline-style

设置轮廓的样式

none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width

设置轮廓的宽度

thin
medium
thick
length
inherit

例:
设置一个元素的轮廓

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title> 
<style>
p 
{ 
	outline:blue solid thick;
}
</style>
</head>

<body>
<p><b>注意:</b>  outline 属性。</p>
</body>
</html>

css 如何为一个元素的四个边框设置不同的颜色呢?


摘要:
下文讲述将元素的四个边框定义不同的颜色的方法,如下所示:


实现思路:
在border-color 依次输入四个颜色值,即可使元素边框呈现出不同的颜色

例:

   p
   {
     border-style:dotted; 
    border-color:red yellow blue black;
     /*上 右 下 左*/
  }

例:

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title>
<style>
  p
   {
          border-style:dotted;
	 border-color:red yellow blue black;
  }
 
</style>
</head>

<body>
<p   >边框样式定义</p> 
</body>

</html>
 
css_四个边框不同颜色的定义方法

css_四个边框不同颜色的定义方法

css 如何使用Border属性快速定义边框样式呢?


摘要:
下文讲述使用border属性快速定义边框样式,如下所示:

在css脚本编写中,我们可以使用Border快速定义一个元素的边框,如下所示:

border:15px solid blue;
——————————–
border属性后面依次放入的属性值为:
border-width
border-style (必须输入)
border-color

例:

   p
   {
      border:15px solid blue; 
  }

例:

    <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title>
<style>
  p
   {
       border:15px solid blue; 
  }
 
</style>
</head>

<body>
<p   >边框样式定义</p> 
</body>

</html>
 
css border快速定义边框样式

css border快速定义边框样式