<!DOCTYPE HTML><html><head> ?<meta charset="UTF-8"> ?<meta http-equiv="x-ua-compatible" content="IE=edge"> ?<meta name="viewport" content="width=device-width, initial-scale=1"> ?<title>圆形的头像示例</title> ?<style> ???* { ?????margin: 0; ?????padding: 0; ?????background-color: #eeeeee; ???} ???.header-img { ?????width: 150px; ?????height: 150px; ?????border: 3px solid white; ?????border-radius: 100%; ?????overflow: hidden; ???} ???.header-img>img { ?????max-width: 100%; ???} ?</style></head><body><div class="header-img"> ?<img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""></div></body></html><!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>滚动背景图示例</title> ???<style> ???????* { ???????????margin: 0; ???????} ???????.box { ???????????width: 100%; ???????????height: 500px; ???????????background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; ???????????background-attachment: fixed; ???????} ???????.d1 { ???????????height: 500px; ???????????background-color: tomato; ???????} ???????.d2 { ???????????height: 500px; ???????????background-color: steelblue; ???????} ???????.d3 { ???????????height: 500px; ???????????background-color: mediumorchid; ???????} ???</style></head><body> ???<div class="d1"></div> ???<div class="box"></div> ???<div class="d2"></div> ???<div class="d3"></div></body></html>CSS实例
原文地址：https://www.cnblogs.com/fu-yong/p/8525885.html