web前端：按鈕轉化變色，陰影box-shadow使用,動畫屬性transform:translate(-x,-y)居中樣式
阿新 • • 發佈：2021-01-04
1.less
* {
margin: 0;
padding: 0;
body {
a {
//a標籤不可以設定寬高，需要display：inline-block
display: inline-block;
//未知寬高下居中使用trnasform:translate(x,y)
width: 100px;
height: 30px;
//原本裝飾樣式decoration為none
text-decoration 2.css
* {
margin: 0;
padding: 0;
}
* body a {
display: inline-block;
width: 100px;
height: 30px;
text-decoration: none;
position: absolute;
background: skyblue;
text-align: center;
font: 20px/30px "微軟雅黑";
font-weight: bold;
color: white;
border: 1px solid darkcyan;
box-shadow: 2px 2px 5px #4682B4;
/**
新居中方法
1. top、height：百分比參照包含塊的高度
2. lefe、margin、padding、width：百分比參照包含塊的寬度
3. translate(-50%,-50%)：百分比參照自身元素的寬高
4. background、position：百分比參照，圖片區域--》圖片點陣圖的畫素值
*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
transition: 1.5s;
}
* body:hover a {
color: white;
background: steelblue;
}
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>light button高亮按鈕</title>
</head>
<body>
<a href="javascript:;">Home</a>
</body>
<link rel="stylesheet" href="css/less024.css" />
</html>
4.效果圖
