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
Introduction to the B-Tree Insertion Process
In the previous article https://www.jb51.net/arti...
Teach you how to build a Hadoop 3.x pseudo cluster on Tencent Cloud
1. Environmental Preparation CentOS Linux release...
Summary of Vue's common APIs and advanced APIs
Table of contents nextTick Mixins $forceUpdate se...
JavaScript removes unnecessary properties of an object
Table of contents Example Method 1: delete Method...
html opens a new window with a hyperlink and can control window properties
1. The window size opened by the HTML hyperlink C...
centos7.2 offline installation mysql5.7.18.tar.gz
Because of network isolation, MySQL cannot be ins...
Vue uses filters to format dates
This article example shares the specific code of ...
JavaScript setTimeout and setTimeinterval use cases explained
Both methods can be used to execute a piece of ja...
Keep-alive multi-level routing cache problem in Vue
Table of contents 1. Problem Description 2. Cause...
Summary of standard usage of html, css and js comments
Adding necessary comments is a good habit that a ...
How can we promote Jiedaibao so that everyone will register? Jiedaibao promotion methods and skills
Jiedaibao is a mobile phone loan software platfor...
Element dynamic routing breadcrumbs implementation example
To master: localStorage, component encapsulation ...
Vue simple implementation of turntable lottery
This article shares the specific code of Vue to s...
How to modify the default storage location of Docker images (solution)
Due to the initial partitioning of the system, th...
MySQL 5.6.27 Installation Tutorial under Linux
This article shares the installation tutorial of ...