Source: http://geek.csdn.net/news/detail/249054?ref=myread
1. The mouse moves into the web page, missing ==
*{
cursor: none!important;
}2. Simple text blur effect
*{
color: transparent;
text-shadow: #111 0 0 5px;
}
3. Multiple borders
.div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
4. Edit CSS in real time
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
5. Simple operation in CSS
.div{
width: calc(100% - 500px);
}
6,border-radius
Because basically many people use it like this:
.div {
border-radius: 4px;
}
A little high-end is like this:
.div {
border-radius: 4px 6px 6px 4px;
}
However, the ultimate black technology works like this:
.div {
border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
Border radius can assign 8 values:
The front of the slash affects the horizontal direction, and the back of the slash affects the vertical direction
Each number represents four different directions.
7,outline-offset
When writing CSS under input, you will be familiar with the following statements:
input {
outline : none;
}
input:focus {
outline : none;
}This is how to remove the default blue line from the input input box.
There is also an outline offset property in CSS. In this property, you can set the default wireframe distance:
input {
outline-offset: 4px ;
}
(webFront end learning and communication group: 328058344 no chatting, do not enter unless you like
Adjust the value of the attribute to see the distance of the outline change.
Finally, I present a big white demo of my colleagues before their internship
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baymax</title>
<link rel=stylesheet href="demo2.css"/>
</head>
<style>
body {
background: #595959;
}
#baymax{
/*Set to center*/
margin: 0 auto;
/*height*/
height: 600px;
/*Hide overflow*/
overflow: hidden;
}
#head{
height: 64px;
width: 100px;
/*Define the shape of the fillet as a percentage*/
border-radius: 50%;
/*background*/
background: #fff;
margin: 0 auto;
margin-bottom: -20px;
/*Style bottom border*/
border-bottom: 5px solid #e0e0e0;
/*Property sets the stacking order of elements; elements with a higher stacking order always precede elements with a lower stacking order*/
z-index: 100;
/*Generate relative positioning elements*/
position: relative;
}
#eye,
#eye2{
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/*Rotate the element*/
transform: rotate(8deg);
}
#eye2{
/*Make it rotationally symmetrical*/
transform: rotate(-8deg);
left: 69px; top: 17px;
}
#mouth{
width: 38px;
height: 1.5px;
background: #282828;
position: relative;
left: 34px;
top: 10px;
}
/*Trunk and abdomen*/
#torso,
#belly{
margin: 0 auto;
height: 200px;
width: 180px;
background: #fff;
border-radius: 47%;
/*Set border*/
border: 5px solid #e0e0e0;
border-top: none;
z-index: 1;
}
#belly{
height: 300px;
width: 245px;
margin-top: -140px;
z-index: 5;
}
#cover{
width: 190px;
background: #fff;
height: 150px;
margin: 0 auto;
position: relative;
top: -20px;
border-radius: 50%;
}
/*heart*/
#heart{
width:25px;
height:25px;
border-radius:50%;
position:relative;
/*Add a shadow effect around the border*/
box-shadow:2px 5px 2px #ccc inset;
right:-115px;
top:40px;
z-index:111;
border:1px solid #ccc;
}
/*Arm*/
#left-arm,
#right-arm{
height: 270px;
width: 120px;
border-radius: 50%;
background: #fff;
margin: 0 auto;
position: relative;
top: -350px;
left: -100px;
transform: rotate(20deg);
z-index: -1;
}
#right-arm{
transform: rotate(-20deg);
left: 100px;
top: -620px;
}
/*Finger*/
#l-bigfinger,
#r-bigfinger{
height: 50px;
width: 20px;
border-radius: 50%;
background: #fff;
position: relative;
top: 250px;
left: 50px;
transform: rotate(-50deg);
}
#r-bigfinger{
left: 50px;
transform: rotate(50deg);
}
#l-smallfinger,
#r-smallfinger{
height: 35px;
width: 15px;
border-radius: 50%;
background: #fff;
position: relative;
top: 195px;
left: 66px;
transform: rotate(-40deg);
}
#r-smallfinger{
background: #fff;
transform: rotate(40deg);
top: 195px;
left: 37px;
}
/*thigh*/
#left-leg,
#right-leg{
height: 170px;
width: 90px;
border-radius: 40% 30% 10px 45%;
background: #fff;
position: relative;
top: -640px;
left: -45px;
transform: rotate(-1deg);
z-index: -2;
margin: 0 auto;
}
#right-leg{
background: #fff;
border-radius:30% 40% 45% 10px;
margin: 0 auto;
top: -810px;
left: 50px;
transform: rotate(1deg);
}
</style>
<body>
<div id="baymax">
<!-- Define the head, including two eyes and mouth -->
<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>
<!-- Defining the torso, including the heart -->
<div id="torso">
<div id="heart"></div>
</div>
<!-- Define the abdomen, including cover(Connection with trunk) -->
<div id="belly">
<div id="cover"></div>
</div>
<!-- Define the left arm, including two fingers, one big and one small -->
<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-smallfinger"></div>
</div>
<!-- Define the right arm, which also includes one big finger and one small finger -->
<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-smallfinger"></div>
</div>
<!-- Define left leg -->
<div id="left-leg"></div>
<!-- Define right leg -->
<div id="right-leg"></div>
</div>
</body>
<html>
I have a front-end learning communication QQ group: 328058344 if you encounter any problems in the process of learning the front-end, welcome to my QQ group to ask questions, and the group will update some learning resources every day. No chatting. Don't enter unless you like it.