css
文章平均质量分 51
Spider--Man
灵魂画家
展开
-
css实现梯形
使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border 使用3d旋转矩形,使之看起来像矩形 <html> <head> <meta charset="utf-8"> <style> .trapezoid-0{ border-bottom: 100px solid #fb3; border-left: 50p原创 2017-03-27 15:17:08 · 7262 阅读 · 0 评论 -
css filter进行图片处理
高斯模糊 每一个像素都取周边像素的平均值,高斯模糊函数传入的是模糊半径<html> <head> <meta charset="utf-8"> <style> div{margin: 20px;width: 300px;height: 140px;background: url(./bg.jpg);background-size: cover;padding: 20原创 2017-03-27 18:04:07 · 1793 阅读 · 0 评论 -
background-clip设置半透明border
<html> <head> <style> .bg{ background: red; width: 200px; height: 200px; padding: 20px; }原创 2017-03-30 18:51:09 · 1238 阅读 · 0 评论 -
除了border,还可以使用box-shadow生成边框
<html> <head> <style> .border{ background: blue; width: 200px; height: 200px; box-shadow: 0 0 0 20px #655, 0 0 0原创 2017-03-30 19:14:22 · 1949 阅读 · 0 评论 -
css打字动画
思路: 每秒输出一个字,通过改变容器的宽度 光标,无限闪烁,通过设置border-right定时透明 <html><head> <meta charset="utf-8"> <style> @keyframes typing { from { width: 0 } }原创 2017-03-26 21:30:54 · 360 阅读 · 0 评论 -
border-radius不仅仅可以用来画圆哦
border-radius 可以设置四个角的值 每个角的值可以设置为百分比或长度 每个角可以设置水平或垂直方向的值 <html><head> <meta charset="utf-8"> <style> .circle { width: 100px; height: 100px; backgrou原创 2017-03-26 23:17:29 · 665 阅读 · 0 评论