以文本方式查看主题 - 课外天地 李树青 (http://www.njcie.com/bbs/index.asp) -- Web技术 (http://www.njcie.com/bbs/list.asp?boardid=28) ---- 课上练习代码——利用CSS实现的太极图 (http://www.njcie.com/bbs/dispbbs.asp?boardid=28&id=1756) |
-- 作者:admin -- 发布时间:2016/10/17 16:30:59 -- 课上练习代码——利用CSS实现的太极图 <html> |
-- 作者:admin -- 发布时间:2016/10/24 17:16:46 -- 另一个版本 <html> <head> <meta http-equiv="Content-Type" c/> <style> #yin-yang { width: 100; height: 200; background: #EEE; border-color: red; border-style: solid; border-width: 2px 2px 2px 100; border-radius: 100%; position: relative; /**作为子元素的定位父元素,也就是说,如果某个元素相对定位了,那其下的子孙元素,在没有其他定位元素隔离的情况下,将以这个父元素的包围框为基准做绝对定位。**/ } #yin-yang:before { content: ""; position: absolute; top: 0; left: -50%; background: #EEE; border: 40px solid red; border-radius: 100%; width: 20px; height: 20px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: -50%; background: red; border: 40px solid #EEE; border-radius: 100%; width: 20px; height: 20px; } </style> </head> <body> <div id="yin-yang"></div> </body> </html> |