收藏
WJ批改状态：合格
老师批语：总的来说写的不错！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>背景各个属性的展示</title><style>.box {width: 400px;height: 400px;/* border: 1px solid red; *//* border-radius: 15px; */border-radius: 200px;/* 背景色 */background-color: aquamarine;/* padding: 20px; *//* 背景裁切 */background-clip: content-box;/* background: red; *//* 渐变化 */background: linear-gradient(red, yellow);background: linear-gradient(45deg, red, yellow);background: linear-gradient(to right, red, yellow);background: linear-gradient(to left, red, yellow);background: linear-gradient(to left, red, white, yellow, blue);background: linear-gradient(to left,rgba(255, 0, 0, 0.5),white,yellow,blue);background-clip: content-box;/* 背景图片 *//* background-image: url("girl.jpg"); *//* 不重复显示 */background-repeat: no-repeat;/* background-repeat: repeat-x; *//* 固定 *//* background-attachment: fixed; *//* 背景定位 *//* 水平方向和垂直方向 *//* background-position: 50px 0; *//* background-position: 50px 50px; */background-position: right center;background-position: center right;/* 只写一个，第二个就是默认center*//* background-position: left; *//* 水平是50% */background-position: 50% 50%;background-size: contain;background-size: cover;/* 简写 */background: violet;/* background: url("girl.jpg") no-repeat right; */background: url("girl.jpg") no-repeat center;position: relative;top: 30px;left: 30px;/* 阴影 *//* box-shadow: 5px 10px 10px #888888; *//* 外发光 *//* box-shadow: 0 0 10px #888888; */}.box:hover {/* 外发光 */box-shadow: 0 0 10px #888888;cursor: pointer;}</style></head><body><div class="box"></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
