標籤：div parent main for flow 試題 src over dex
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>面試題</title><style type="text/css">.main{padding: 50px;}.demo{margin: 30px 0;}.demo span{display: block;}.demo1 span { width: 100px; height: 100px; background: red; } .demo2 span { width: 100px; height: 100px; background: red;border-radius:50%;} .demo3 span { width: 200px; height: 100px; background: red;border-radius: 100px / 50px; }.demo4 span { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; }.demo5 span { width: 0; height: 0; border-bottom: 50px solid transparent; border-top: 50px solid transparent; border-left: 50px solid red;} .demo6 span { width: 100px; height: 100px; border-bottom: 50px solid transparent; border-top: 50px solid transparent; border-left: 50px solid red;}.demo7 span { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; }.demo7 span:after { width: 0; height: 0;content: "";border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute;top: 30px;left: -50px;}.demo8 span { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .demo8 span:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }.demoM{width: 200px;height: 150px;border: red solid 2px;border-radius: 50%;background: #fff;position: relative;overflow: hidden;padding-top: 50px;}.demoM:after{content: "";width: 200px;height: 200px;background: red;position: absolute;top: 100px;left: 0;z-index: 0}.demoM .left{width: 100px;height: 100px;background: red;float: left;border-radius: 50%;position: relative;z-index: 1}.demoM .left:before{content: "";width: 10px;height: 10px;background: #fff;position: absolute;top: 45px;left: 45px;border-radius: 50%;}.demoM .right{width: 100px;height: 100px;background: #fff;float: left;border-radius: 50%;position: relative;z-index: 1}.demoM .right:before{content: "";width: 10px;height: 10px;background: red;position: absolute;top: 45px;left: 45px;border-radius: 50%;}</style></head><body><div class="main"><div class="demo demo1"><span></span></div><div class="demo demo2"><span></span></div><div class="demo demo3"><span></span></div><div class="demo demo4"><span></span></div><div class="demo demo5"><span></span></div><div class="demo demo6"><span></span></div><div class="demo demo7"><span></span></div><div class="demo demo8"><span></span></div><div class="demo demoM"><span class="left"></span><span class="right"></span></div></div></body></html>
css3 基本圖形
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
