CSS3
css
jasonjkj
初入前端 多多指教
展开
-
border-image
head> meta charset="UTF-8"> title>Titletitle> style> div { width: 500px; height: 500px; border: 30px solid red; border-image: url(im原创 2017-09-18 14:51:17 · 515 阅读 · 0 评论 -
calc()
关于css calc的测试 0.参考 https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 1.使用的场合 1.box-sizing 的替代品 2.类似于简单的@media 做一个简单的响应是布局(实现比较容易)原创 2018-01-23 09:36:59 · 547 阅读 · 0 评论 -
canvas动态时钟(老师写的)
html>head> title>动态时间.htmltitle> meta charset="UTF-8"> meta name="keywords" content="keyword1,keyword2,keyword3"> meta name="description" content="this is my page"> meta name="con原创 2017-09-21 17:21:34 · 402 阅读 · 0 评论 -
@media 媒体查询
CSS3的媒体类型(在响应式会使用)参看这篇文章(非常合适初学者)https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries自己测试内容及总结1.CSS2的一些引入媒介类型的方式(感觉没有CSS3的好使) 1.未指定media: 默认为all[任何设备]2.#div1{color:red;原创 2017-09-21 08:44:10 · 351 阅读 · 0 评论 -
2d 3d 转换的补充
1.沿着点旋转旋转(2d和3D基本相同) 是沿着自己的中心旋转的()可以通过transform-origin:来更改旋转中心transform: rotate(60deg);2.沿着轴做旋转,transform: skew(0deg,20deg);//skew(X轴旋转,Y轴旋转)这个之前没怎么使用元素自己为中心.创建3维坐标轴(与浏览器坐标轴相同)之后原创 2017-09-20 16:00:59 · 201 阅读 · 0 评论 -
translate 的50%是相对于自己的
head> meta charset="UTF-8"> title>Titletitle> style> /*translate 的50%是相对于自己的 子元素的百分比高度是根据父元素的高度来确定的, 所以只要设置了父元素的高度,子元素的高度百分比才会有用。 但是(之前没想那么多) trans原创 2017-09-19 19:42:32 · 2570 阅读 · 0 评论 -
渐变测试
style> div:nth-of-type(1){ width: 100%; height: 600px; /* background: linear-gradient(to left,red 10%,yellow 70%,green 10%); 这个百分原创 2017-09-19 17:30:37 · 746 阅读 · 0 评论 -
bachground-image背景渐变笔记
background-image的衍生渐变,用的不是很多(之间PS多好,费这事儿)1。渐变 (按钮的背景,线性,径向,重复渐变) 配合background-size:30% 100%; 实现进度条填充,美滋滋渐变语法background-image:取值:linear-gradient(value)---->线性radial-gradient(原创 2017-09-19 17:15:51 · 459 阅读 · 0 评论 -
CSS3多个背景图片和之前背景的笔记
在CSS3 中可以设置多个背景图片类似于下面这种background-image: url("images/bg3.png"),url("images/bg2.png"),url("images/bg1.jpg");中间使用","隔开我想使用背景的其他属性怎么给..每一个背景设置相关样式呢....同样使用","隔开background-repeat: no-repeat原创 2017-09-19 17:06:16 · 1349 阅读 · 0 评论 -
CSS动画的初步使用(好像比jQuery流畅)
style> /*1.定义动画*/ @-webkit-keyframes myKey { 0% { width: 100px; } 5% { width: 200px; } 100%原创 2017-09-18 16:49:23 · 407 阅读 · 0 评论 -
css colum 列设置
head> meta charset="UTF-8"> title>Titletitle> style> /* 1.column-count:整数; 列数 -webkit-column-count:3; -moz-column-count:3; 2.column-gap:原创 2017-09-18 15:59:26 · 687 阅读 · 0 评论 -
移动端适配
移动端适配 rem 总结面试必问:(代码)1.自己写一个代码:function remSet() { var html = document.documentElement; var deviceWidth = html.getBoundingClientRect().width; html.style.fontSize = deviceWidth / 15 + 'px';}r...原创 2018-06-23 20:35:38 · 230 阅读 · 0 评论