Home > Article > Web Front-end > DIV and CSS methods to implement dotted borders | CSS dotted underlines and dotted lines
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/]
Example:
CSS code:
[code].pcss5{border:1px dashed #000; height:50px;width:350px}Html code:
<p class="pcss5">我的四边为黑色虚线边框</p>
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}Html code:
<p class="pcss5-1">我的左边为黑色虚线边框</p>
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}Html code:
<p class="pcss5-2">我的右边为黑色虚线边框</p>
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}Html Code:
<p class="pcss5-3">我的上边为黑色虚线边框</p>
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}Html code:
<p class="pcss5-4">我的下边为黑色虚线边框</p>
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}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>我的右边边框无边线而其它三边为黑色虚线边框实例
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;}/* 这里设置带链接文字下方出现虚线下划线*/a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */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>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]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;}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}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;}Corresponding HTML code:
<p class="pcss5"></p>
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%">
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 ; }corresponds to the hr title code in html:
<hr size=1>
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
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!