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
How to query date and time in mysql
Preface: In project development, some business ta...
Detailed explanation of CentOS configuration of Nginx official Yum source
I have been using the CentOS purchased by Alibaba...
Detailed explanation of the use of HTML canvas and page storage technology in JavaScript
Table of contents 1. JavaScript uses canvas in HT...
ReactRouter implementation
ReactRouter implementation ReactRouter is the cor...
Differences between ES6 inheritance and ES5 inheritance in js
Table of contents Inheritance ES5 prototype inher...
Detailed explanation of Docker Swarm concepts and usage
Docker Swarm is a container cluster management se...
How to solve the problem of absolutely positioned elements mysteriously disappearing or being blocked in IE6/7
1. When the width of the adjacent floating layer o...
MySQL daily statistics report fills in 0 if there is no data on that day
1. Problem reproduction: Count the total number o...
CSS border adds four corners implementation code
1.html <div class="loginbody"> &l...
Vue+video.js implements video playlist
This article shares the specific code of vue+vide...
Detailed explanation of the idea of installing mysql8.0.11 and changing the root password and connecting navicat for mysql
1.1. Download: Download the zip package from the ...
Node.js+express+socket realizes online real-time multi-person chat room
This article shares the specific code of Node.js+...
How to install JDK and set environment variables in Linux (this article is enough)
Table of contents 1. Check the number of Linux bi...
Detailed description of the life cycle of React components
Table of contents 1. What is the life cycle 2. Lo...
MySQL 8.0 download and installation configuration graphic tutorial under Windows 10
This article shares the download and installation...