CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射
来源:互联网 发布:写sql算研发么 编辑:程序博客网 时间:2024/06/03 09:16
多列布局(multi-column layout)
<style> .div{ width:60%; column-count:3; column-rule:1px solid black; column-gap:2em; } </style> <div class="div"> 列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条列与列之间的间隔条 </div>
column-count:布局几列
column-rule:列与列之间的间隔条的样式
column-gap:列与列之间的间隔
为了考虑兼容性一般都会:
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
加上浏览器内核前缀。
边框和颜色
rgb和rgba
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间
background-color:rgb(255,0,0)background-color:rgba(255,0,0,0.8)
a为透明度0.8代表百分之80%透明度
HSLA
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
A:Alpha透明度。取值0~1之间。
圆角
border-radius:整数 | 百分数
eg:一个div为200PX的正方形
border-radius:100pxborder-radius:50%
都会使正方形变成圆形(圆角到极限了),并且当超过50%之后不会再有任何变化。
渐变效果(gradient)
因为我不经常用暂时没有尝试(有点任性0.0),不过推荐一篇很全面的文章:https://www.w3cplus.com/content/css3-gradient
阴影(shadow)
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
4个参数
h-shadow:必须,水平阴影的位置,可为负
v-shadow:必须,垂直阴影的位置,可为负
blur: 模糊的距离(阴影模糊的半径)
color:阴影颜色
.div1{ width:200px; height:200px; background-color:black; box-shadow:50px 100px 10px red;}.div2 span{ font-size:20px; text-shadow:3px 3px 3px red;}<div class="div1"></div><div class="div2" style="margin-top:50px;"> <span>hello world</span></div>
从上图可以看出来,水平和竖直阴影的位置,其实就是阴影相对于原位置的移动,阴影并不会占据任何margin padding 或者width height,对其他元素也不会造成影响(不会改变其他的位置,div2没有因为div1的阴阳而被挤下来),它更像是背景。
反射
box-reflect
有三个参数,分别为direction offset mask-box-image
看个栗子
.classReflect{ -webkit-box-reflect: below 10px -webkit-gradient(linear, left top,left bottom,from(transparent), to(rgba(255, 255, 255, 0.51))); }
direction:
1.above:指定倒影在对象上边
2.below:在对象下边
3.left:在左边
3.right:在右边
offset:
1.length:用长度定义倒影与对象之间的间隔 可为负
2.precentage:百分比表示 可为负
mask-box-img:
1.url:使用绝对或相对地址指定遮罩图像
2.linear-gradient: 使用线性渐变创建遮罩图像
3.radial-gradient:使用径向(放射性)渐变创建遮罩图像。
4.repeating-linear-gradient:使用重复的线性渐变创建背遮罩像
5.repeating-radial-gradient:使用重复的径向渐变创建遮罩图像
现在来解释下上面代码:倒影在对象下边,与对象之间的间隔为10px,渐变方式为从上到下变化。
- CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射
- css3边框阴影效果
- css3渐变,圆角,阴影
- css3文字渐变和阴影、图片边框和边框阴影
- css3-边框圆角阴影渐变
- css3边框 圆角 阴影
- css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
- CSS3背景颜色渐变效果
- Android 使用xml实现边框阴影,背景渐变效果(附有RGB颜色查询对照表)
- CSS3边框阴影,折角效果演示
- css3使边框具有渐变的效果
- CSS3 (边框 圆角 阴影)
- CSS3边框 圆角 阴影,旋转
- css3阴影设置发光边框效果,阴影按钮
- CSS3新标准选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面
- CSS实现表格边框阴影和背景渐变效果
- CSS实现表格边框阴影和背景渐变效果
- css3渐变和阴影
- unity 制作动态适应的scrollview的注意点
- [转]Webview支持缩放并隐藏讨厌的缩放控制条
- 【Android源码分享】小k英语口袋
- adb devices报错总结
- malloc()和calloc()简介
- CSS3--多列布局、边框颜色、圆角、渐变效果、阴影反射
- redis ID生成器
- linux下部署jdk1.7
- Anconda 安装PyBrain库(也可以解决ImportError: No module named 'structure' 这个问题)
- 格式保存
- Android自定义圆形圆角图片示例
- 欢迎使用CSDN-markdown编辑器
- C++程序设计--宏定义在代码中的实际作用
- c++ list, vector, map, set 区别与用法比较