CSS 颜色,五种开发使用场景
CSS 颜色的作用和使用场景
如果不想让web前端呈现给用户的页面过于单调,可以通过CSS为网页设计一点颜色,以增加色彩和层次。CSS的颜色在web前端的开发当中有相当广泛的应用,比如字体颜色color、背景色background-color、边框颜色border、投影颜色box-shadow、轮廓颜色outline等等。
字体颜色color示例
笨鸟工具,x1y1z1.com
这是一个将提供python全栈教程的网站,这部分是前端的CSS。
字体颜色实例代码,及在线编辑器
<p style='color:blue'>这是蓝色字体</p>
<p style='color:skyblue'>这是天蓝色的字体样式</p>
背景色background-color样式示例
Orange
背景色实例代码
<div style='width:100%;height:60px;background-color:green;text-align:center;'><p style='line-height:60px;color:white;'>Green</p></div>
边框颜色border示例
Skyblue
边框颜色实例代码
<div style='width:100%;height:60px;border:1px solid skyblue;text-align:center;'><p style='line-height:60px;color:skyblue;'>Skyblue</p></div>
投影颜色box-shadow示例
Tomato
边框颜色实例代码
<div style='width:100%;height:60px;box-shadow:1px 1px 10px rgb(255, 99, 71);text-align:center;'><p style='line-height:60px;color:Tomato;'>Tomato</p></div>
轮廓颜色示例
下方为一个输入框,周围为轮廓颜色,并不是边框颜色:
轮廓颜色实例代码
<input type='text' style='width:100%;outline:YellowGreen solid 6px;'>