Web Front-endCSS TutorialDIV and CSS methods to implement dotted borders | CSS dotted underlines and dotted linesDIV 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!
Draggin' and Droppin' in ReactApr 17, 2025 am 11:52 AMThe React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd,
Fast SoftwareApr 17, 2025 am 11:49 AMThere have been some wonderfully interconnected things about fast software lately.
Nested Gradients with background-clipApr 17, 2025 am 11:47 AMI can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis,
Using requestAnimationFrame with React HooksApr 17, 2025 am 11:46 AMAnimating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things
Need to scroll to the top of the page?Apr 17, 2025 am 11:45 AMPerhaps the easiest way to offer that to the user is a link that targets an ID on the element. So like...
The Best (GraphQL) API is One You WriteApr 17, 2025 am 11:36 AMListen, I am no GraphQL expert but I do enjoy working with it. The way it exposes data to me as a front-end developer is pretty cool. It's like a menu of
Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading IndicatorApr 17, 2025 am 11:26 AMIn this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's
Various Methods for Expanding a Box While Preserving the Border RadiusApr 17, 2025 am 11:19 AMI've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Zend Studio 13.0.1
Powerful PHP integrated development environment
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
