css3
编码使我快乐20240925
java十年,管理三年,嵌入式转行中
展开
-
css学习笔记-盒子的样式
display的几种参数1.inline和blockinline,在一行中不会换行,内联属性不可设置盒子大小,且不会自动换行。block,不在一行会自动换行,可设置盒子的大小默认下,span是inline的,div是block的 div{ background-color: aqua; }原创 2017-06-16 15:30:55 · 422 阅读 · 0 评论 -
css学习笔记-盒子内显示不下的内容的处理
学习 overflow:hidden,scroll,auto,visibleoverflow-x和overflow-yoverflow-x,overflow-y和overflow的用法是一样的,只是特地的指定了x与y轴而已。我这里只写了overflow的用法。1.不添加overflow样式首先上代码:限定了div的宽度和高度,但是里面的内容缺超出了div的大小。原创 2017-06-19 13:07:21 · 1376 阅读 · 0 评论 -
css学习笔记-盒子的阴影
基本应用box-shadow:param1 param2 param3 param4param1:向右偏移param2:向下偏移param3:模糊程度param4:颜色举例: Title div{ box-shadow: 10px 10px 10px grey; backgroun原创 2017-06-19 13:42:15 · 347 阅读 · 0 评论 -
css学习笔记-盒子的box-size
主要有两个参数border-box和content-box Title .border-box{ background-color: crimson; width: 100px; height: 100px; padding: 10px;原创 2017-06-19 13:48:23 · 1786 阅读 · 0 评论 -
css学习笔记-border-image
border-image据说是css3的一员大将。这个例子是从w3c school上学习到的(http://www.w3school.com.cn/cssref/pr_border-image.asp)先上一个例子,我想达到如下的展示效果:重点是在边框,边框的图形如下:然后是代码部分: border-image测试 d原创 2017-06-21 11:00:57 · 403 阅读 · 0 评论 -
css学习笔记-过渡
首先推荐一下:W3school(http://www.w3school.com.cn/cssref/index.asp#transition)上面讲解挺详细的,而且可以立即的写代码尝试结果。笔者的也是通过此处进行学习的。一共4个属性,第一个是下面四个的简写。笔者自己亲手学习了下,目标是做一个方块,当鼠标悬浮上去的时候,改变大小、背景颜色和字体颜色,且有过渡效果。之前:原创 2017-06-21 13:34:10 · 295 阅读 · 0 评论 -
css学习笔记-动画
开始前还是推荐下:http://www.w3school.com.cn/cssref/index.asp#animation内容去W3school看,讲的很详细。附上一段笔者的测试代码: 动画测试 div { width: 50px; height: 50px;原创 2017-06-21 14:21:41 · 260 阅读 · 0 评论