DIV and CSS methods to implement dotted borders | CSS dotted underlines and dotted lines-CSS Tutorial-php.cn

DIV and CSS methods to implement dotted borders | CSS dotted underlines and dotted lines

不言

Release： 2018-06-28 13:44:43

Original

3699 people have browsed it

This article mainly introduces the methods of DIV and CSS to implement dotted borders | CSS dotted underlines and dotted lines. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Here Control the dotted line through the dotted border border of the border attribute

1, CSS dotted border line - TOP
Here, the dotted line is controlled by the dotted border border of the border attribute. The css height (css height) and css width (css width) set below are 350 pixels for the convenience of viewing the demonstration. Other meanings.

One and four sides are dotted borders

border:1px dashed #000; 黑色虚线边框[code/]

Copy after login

Example:
CSS code:

[code].pcss5{border:1px dashed #000; height:50px;width:350px}

Copy after login

Html code:

<p class="pcss5">我的四边为黑色虚线边框</p>

Copy after login

Set the border here The abbreviation method defines the pcss5 selector's four-sided border as a 1px black dotted border

2. Dotted line on the left:

CSS code:

.pcss5-1{border-left:1px dashed #000; height:50px;width:350px}

Copy after login

Html code:

<p class="pcss5-1">我的左边为黑色虚线边框</p>

Copy after login

Here is a black dotted border on the left side

3. Dotted line on the right side:

CSS code:

.pcss5-2{border-right:1px dashed #000; height:50px;width:350px}

Copy after login

Html code:

<p class="pcss5-2">我的右边为黑色虚线边框</p>

Copy after login

Here is a black dotted border on the right side

4. The top side (upper edge) is a dotted line:

CSS code:

.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}

Copy after login

Html Code:

<p class="pcss5-3">我的上边为黑色虚线边框</p>

Copy after login

Here, the top edge (upper edge) is set as a black dotted border

5. The bottom edge (lower edge) is a dotted line:

CSS code ：

.pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}

Copy after login

Html code:

<p class="pcss5-4">我的下边为黑色虚线边框</p>

Copy after login

Here the bottom edge (lower line) is set as a black dotted border

6. Either side is not a dotted line, the other If the three sides are dotted lines

Add the right border without a dotted line and the other three sides with black dotted borders

CSS code:

.pcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Copy after login

Html code:

我的右边边框无边线而其它三边为黑色虚线边框实例 
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。 
以上实例完整p+CSS代码如下： 
 
 
 
 
CSS 虚线 pCSS5实例说明www.pcss5.com 
 
 
 
www.pcss5.com css虚线实例实例
我四边为虚线边框
<p class="pcss5-1">我的左边为黑色虚线边框</p>
<p class="pcss5-2">我的右边为黑色虚线边框</p>
<p class="pcss5-3">我的上边为黑色虚线边框</p>
<p class="pcss5-4">我的下边为黑色虚线边框</p>
我的右边边框无边线而其它三边为黑色虚线边框实例

Copy after login

2. Hyperlink dotted underline - TOP

We often set the linked text content to either have a dotted underline with the link, or move the mouse to the linked text and a dotted underline appears. How about this? As for the implementation, here is an introduction to the dotted underline of CSS hyperlinks.

1. Linked text has dotted underline

Here, the CSS style of the hyperlink a object is also controlled through the CSS border property.

Demo CSS code:

a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/

Copy after login

a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

Copy after login

Complete div CSS code:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>CSS 虚线下划线 pCSS5实例说明</title> 
<style> 
a{ border-bottom:1px dashed #111;text-decoration:none;} 
a:hover{ border:0;} 
</style> 
</head> 
<body> 
欢迎到<a href="http://www.pcss5.com/">CSS教程网</a>的www.pcss5.com - pcss5学习CSS 
</body> 
</html>

Copy after login

Description: text-decoration:none; This is to remove the CSS underline (super The underline attribute that comes with the link by default)

The above is the text with a CSS hyperlink with a dotted underline.

2. A dotted underline appears when the mouse is placed on the linked text

This is very similar to the above. Just remove the underline for hyperlink A and add a dotted line below the CSS text when the mouse passes over it. Just underline the border.

Corresponding CSS code:

a{text-decoration:none;}
[/code]a:hover{border-bottom:1px dashed #111;} [/code]

Copy after login

This is achieved. You may wish to try the hyperlink underline example.

3. List-type CSS dotted underline - TOP

Often when they encounter CSS LI, they hope that the bottom of each row of content in this CSS list style will be separated by dotted lines as shown below

Here we only need to set the bottom border of LI to a dotted border.

First of all, we set the CSS code when initializing the CSS:

li{border-bottom:1px dashed #111;}

Copy after login

The list-type content of li can be realized as separated by dotted lines in the figure above (the bottom of each li content is Dotted border)
Also we often encounter that the dotted line at the bottom of li is as small as a dot, and the border is difficult to achieve. At this time, we need a dotted picture of the dotted line (one side is 1 pixel high and wide 3 pixels of 1 pixel color image can be achieved)

Corresponding CSS li code:

Li{background:url(点图片路径) repeat-x 0 bottom}

Copy after login

We will not demonstrate in detail here. We will also introduce and demonstrate various production methods in detail for you in VIP. li CSS knowledge points.

4. CSS defines a horizontal dotted line - TOP

This is easy to understand and can also be achieved by setting a border dotted line on the p object. You can also set the dotted line attribute on the hr horizontal line label. Horizontal dashed dividing line.

It can be passed here as follows:

Set a horizontal dotted line for p:

.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}

Copy after login

Corresponding HTML code:

<p class="pcss5"></p>

Copy after login

Horizontal for hr Set the attributes of the dividing line:

The first method is to set the dotted line attribute in the hr tag:

<hr size=1 style="color: blue;border-style:dashed ;width:100%">

Copy after login

The description here is that size is the value of hr, and one side can be set to 1.

The second method is to define the css attribute of hr in css code or CSS file

hr {border-top:1px dashed #00F ; }

Copy after login

corresponds to the hr title code in html:

<hr size=1>

Copy after login

Here is Set the border for hr to a blue dotted border of 1 pixel on either top or bottom edge, and set the size of hr to 1, which is roughly the same as the first value. The only difference is that when the hr tag appears in html, The hr tag attribute is set for css, which can reduce the amount of code if the web page appears multiple times.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Css style for vertically centered images in variable width and height divs

Transition transition and transition in CSS3 Introduction to the use of Animation animation properties

The above is the detailed content of DIV and CSS methods to implement dotted borders | CSS dotted underlines and dotted lines. For more information, please follow other related articles on the PHP Chinese website!