今天是2019年6月19日星期三,在这里跟大家分享css基础的第二部分单位、尺寸、溢出和边框,下面是详细的内容,请各位大佬积极改正!
一、单位
二、尺寸属性
三、溢出
<!doctype html> <html> <head> <meta charset="utf-8"> <title>溢出属性</title> <style> #box { width: 150px; height: 150px; border: 1px solid #333; overflow: hidden; /*overflow: scroll; overflow: auto;*/ } </style> </head> <body> <div id="box"> zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy zhyzhyzhyzhyzhyzhyzhyzhyzhyzhy zhyzhyzhyzhyzhyzhy </div> </body> </html>
四、边框
<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框</title> <style> #box { width: 400px; height: 400px; border: 10px solid orange; /*border: 10px dotted orange; border: 10px dashed orange;*/ } </style> </head> <body> <div id="box">我是div</div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单项边框</title> <style> #box { width: 300px; height: 300px; border-left: 10px solid #666; border-top: 10px dotted #456; border-right: 10px dashed #000; border-bottom:10px dotted #800080; } </style> </head> <body> <div id="box"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单边框</title> <style> #box { width: 300px; height: 300px; border: 5px solid orange; border-color: #ff0000; } </style> </head> <body> <div id="box"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单边框单属性</title> <style> #box { width: 400px; height: 400px; border: 5px solid #008000; border-top-color: #800080; border-right-color: #e4393c; border-bottom-color: #ffa500; } </style> </head> <body> <div id="box"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单边倒角</title> <style> #box { width: 300px; height: 300px; background: orange; border-top-left-radius: 20px; border-radius: 5px 20px 40px 100px; } </style> </head> <body> <div id="box"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框阴影</title> <style> #box { width: 300px; height: 300px; background: orange; box-shadow: 10px 10px 10px rgb(93,145,77); } </style> </head> <body> <div id="box"></div> </body> </html>
未完,待续!等待下次更新。。。。。。
如对本文有疑问, 点击进行留言回复!!
css深入剖析transform的translate和perspective
HCIE第四天总结(典型组网之一:CSS+Eth-Trunk+iStack)
了解下Apache Elasticsearch 和 Kibana
网友评论