CSS border half or partially visible implementation code
|
1. Use pseudo-classes to display half of the Border
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use pseudo-classes to insert content before or after an element</title>
<style>
div {
position: relative;
width: 300px;
height: 50px;
background-color: #bbb;
padding: 4px
}
div:before {
content: "";
position: absolute;
left: 0;
top: -2px;
width: 50%;
height: 2px;
background-color: red
}
</style>
<div>Please see that the "top border" of this div is only half</div>
</body>
</html>
2. Use absolute positioning and add border boxes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use position positioning, half of the border is displayed</title>
<style>
#holder {
height: 50px;
width: 300px;
position: relative;
margin: 10px;
background-color: #eee;
}
#mask {
position: absolute;
top: -1px;
left: 1px;
width: 50%;
height: 1px;
background-color: orchid;
}
</style>
<div id="holder">
Please see that the "top border" of this div is only half <div id="mask"></div>
</div>
</body>
</html>
This is the end of this article about the implementation code of half or partially visible CSS border. For more relevant CSS border content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Installation of mysql5.7 and implementation process of long-term free use of Navicate
>>: Summary of various forms of applying CSS styles in web pages
Recommend
Solution to 700% CPU usage of Linux process that cannot be killed
Table of contents 1. Problem Discovery 2. View de...
A colorful cat under Linux
Friends who have used the Linux system must have ...
Solution to the problem of stuck when clicking Select All in Element's shuttle box with large amount of data
Table of contents Solution 1: Copy the transfer c...
JavaScript code to achieve a simple calendar effect
This article shares the specific code for JavaScr...
How to install Elasticsearch7.6 cluster in docker and set password
Table of contents Some basic configuration About ...
Pure CSS to achieve the text description of semi-transparent effect when the mouse is placed on it (must read for novices)
The effect is as follows: Example 1 Example 2: Ta...
Responsive Web Design Learning (1) - Determining the screen size and percentage usage
Nowadays, mobile devices are becoming more and mo...
Detailed explanation of how tomcat calls Servlet initialization from source code analysis
Table of contents introduction 1. Code to start t...
Html+CSS floating advertisement strip implementation
1.html part Copy code The code is as follows: <...
Detailed explanation of MySQL partition table
Preface: Partitioning is a table design pattern. ...
MySQL variable principles and application examples
In the MySQL documentation, MySQL variables can b...
JavaScript mobile H5 image generation solution explanation
Now there are many WeChat public account operatio...
Detailed tutorial on installing ElasticSearch 6.x in docker
First, pull the image (or just create a container...
Drawing fireworks effect of 2021 based on JS with source code download
This work uses the knowledge of front-end develop...
Recommend a cool interactive website made by a front-end engineer
Website link: http://strml.net/ By Samuel Reed Ti...