css
kangkang_style
活着的感觉挺好,珍惜来之不易的每一天
展开
-
css3 盒子阴影 box-shadow
语法: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:必需的 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度) v-shadow:必需的 从原点开始,沿y轴正方向的长度(倘若为负值,为沿y轴负方向的长度) blur: 可选 阴影的模糊度,只允许为正值 spread: 可选 阴影扩展...原创 2019-10-23 16:56:57 · 415 阅读 · 0 评论 -
css3 圆角 border-radius
一个属性值: 元素四个方向的圆角大小两个属性值: 第一个值表示左上角和右下角 第二个值表示右上角和左下角三个属性值: 第一个值表示左上角 第二个值表示右上角和左下角(对角) 第三个值表示右下角四个属性值: 分别表示左上角、右上角、右下角、左下角的圆角大小 顺时针方向...原创 2019-10-23 16:51:54 · 176 阅读 · 0 评论 -
Animate.css 动画效果框架
1. 从官网下载 https://raw.github.com/daneden/animate.css/master/animate.css2. 通过npm安装 $ npm install animate.css3. 使用在线cdn https://unpkg.com/animate.css@3.5.2/animate.min.css想要使用...原创 2019-03-21 21:17:23 · 969 阅读 · 0 评论 -
filter: blur() 高斯模糊效果
比较喜欢的效果实例: <div class="lbg"> <img src="../../assets/01.jpg" class="test-img"> </div> .lbg{ /* 设置相对定位 */ position: relative; /* 宽度120%,-10%让元素集中 */ lef...原创 2019-03-21 21:14:38 · 4030 阅读 · 0 评论 -
RGBA(0,0,0,0)调色
前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数。第四个值,alpha值,制定了色彩的透明度/不透明度,它的范围为0.0到1.0之间,0.5为半透明。rgba(255, 255, 255, 0)则表示完全透明的白色rgba(0, 0, 0,1 )则表示完全不透明度的黑色rgba(144, 238 ,144, 0.5)//半透明的青苹果绿rg...原创 2019-03-21 21:12:22 · 15188 阅读 · 0 评论 -
css 悬浮按钮展开 FloatButton
FloatButton<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Float Button</title> <style type="text/css" rel="sty原创 2019-02-18 14:58:55 · 1664 阅读 · 0 评论 -
css 半圆凹陷
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style type="text/css"> .outer{ width: 400px; height: 50px; backgr原创 2019-01-26 16:14:54 · 2798 阅读 · 0 评论 -
cssRules 与 rules 的使用
当html中引用外部css样式时,就不能通过document.style获取属性,而是需要通过document.stylesheets获取属性表对象即CSSStyleSheet对象,再从属性表对象中获取属性与操作方法。获取属性的方法有两种:1.cssRules2.rules通过打印cssText,可以清晰的知道两者的不同:document.styleSheets[0原创 2017-07-28 16:52:17 · 3974 阅读 · 0 评论 -
Css3 弹性盒子
CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS3 弹性盒子内容弹性盒子转载 2017-08-09 10:24:04 · 488 阅读 · 0 评论 -
css Position 与 display
position 1、position属性取值:static(默认)、relative、absolute、fixed、inherit。 2、postision:static;始终处于文档流给予的位置。看起来好像没有用,但它可以快速取消定位,让top,right,bottom,left的值失效。在切换的时候可以尝试这个方法。 3、除了static值,在其他三个值的设置下转载 2017-08-09 09:52:04 · 436 阅读 · 0 评论