Css
lianflower
这个作者很懒,什么都没留下…
展开
-
清除button默认边框、默认背景
【代码】清除button默认边框、默认背景。原创 2023-03-02 16:52:20 · 591 阅读 · 0 评论 -
flex布局align-items的stretch和baseline
【代码】flex布局align-items的stretch和baseline。原创 2022-09-02 18:18:34 · 3172 阅读 · 0 评论 -
flex布局align-items的默认值stretch
【代码】当为父容器设置flex布局后,子容器会继承父容器的高度。原创 2022-09-02 16:04:51 · 638 阅读 · 0 评论 -
css同时设置最大宽度和最小宽度
【代码】css同时设置最大宽度和最小宽度。原创 2022-09-01 14:53:44 · 364 阅读 · 0 评论 -
css计算属性min用法
【代码】css计算属性min用法。原创 2022-09-01 14:52:30 · 201 阅读 · 0 评论 -
css计算属性max用法
【代码】css计算属性max用法。原创 2022-09-01 14:40:07 · 230 阅读 · 0 评论 -
css数学计算calc用法
【代码】css数学计算calc用法。原创 2022-09-01 14:30:30 · 1344 阅读 · 1 评论 -
css单位vw和vh用法
【代码】css单位vw和vh用法。原创 2022-09-01 14:24:03 · 583 阅读 · 0 评论 -
css单位rem用法
【代码】css单位rem用法。原创 2022-09-01 14:10:37 · 724 阅读 · 0 评论 -
css单位em用法
【代码】css单位em用法。原创 2022-09-01 14:03:27 · 311 阅读 · 0 评论 -
分享一个使用svg画的切角梯形边框
有个缺点: 当容器的高度太小时,显示会有问题,例如设置.trapezoid选择器的高度为15%后,如下: 如果哪位大佬知道该怎样解决这个问题,还请赐教一下:)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&g.原创 2021-03-08 16:18:46 · 559 阅读 · 0 评论 -
css和jquery实现,切换向下三角形和向右三角形
https://stackoverflow.com/questions/47691286/how-to-rotate-a-triangle-down-to-a-triangle-up-using-css-and-jquery转载 2021-02-18 19:20:27 · 280 阅读 · 2 评论 -
滚动滚动条时,做一些联动操作
转载:https://www.youtube.com/watch?v=lZ-OO7x75Rc<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding:转载 2021-02-16 14:50:37 · 297 阅读 · 0 评论 -
flex布局的align-content属性
参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-examples.htmlalign-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。多根轴线,指的就是多行lesson1:<!DOCTYPE html><html lang="en"><head> <m原创 2020-11-06 15:17:15 · 1958 阅读 · 0 评论 -
css配色工具
https://color.adobe.com/zh/原创 2020-09-11 16:28:06 · 309 阅读 · 0 评论 -
css中appearance:none修改select option样式
https://www.xinran001.com/frontend/145.htmlselect option有浏览器默认样式,且对自己的样式有一定的保护(基于css规则)。这个保护就是appearance属性,浏览器内置的css样式是不允许更改的,日常开发仅是在它的样式基础上覆盖而已。然而当设置 appearance: none 的时候,就相当于让select元素脱离浏览器内置select样式了。此时它相当于一个div,开发者就可以灵活设置样式了。...转载 2020-08-27 14:35:35 · 1625 阅读 · 0 评论 -
CSS选择器里面的加号“+”是什么意思,如何使用
https://zhidao.baidu.com/question/436706697728087884.html我直接举例说吧,比如p+img{border-top:1px solid #000;}这样紧跟在p标签后的img标签都会加上边框,而单独出现的img标签并不会有上边框转载 2020-08-27 14:33:33 · 963 阅读 · 0 评论 -
将CodePen中的PostCSS修改为普通css
https://www.itranslater.com/qa/details/2326259037404398592转载 2020-08-27 14:29:40 · 169 阅读 · 0 评论 -
css input下拉框
https://freefrontend.com/css-select-boxes/转载 2020-08-27 14:25:41 · 1464 阅读 · 0 评论 -
css 搜索框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.min.js"></script> <style> #test { width: 270px;原创 2020-08-26 13:51:49 · 540 阅读 · 0 评论 -
筛选图标_svg_可调整颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>筛选图标_svg_可调整颜色</title></head><body><!--通过fill属性调整配色--><svg t="1597395775693" class="icon" viewBox="0 0 1024 1024" ver原创 2020-08-14 17:08:28 · 381 阅读 · 0 评论 -
svg实现直线带双向箭头,且直线中间镶嵌文本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg实现直线带双向箭头,且直线中间镶嵌文本</title> <script src="../js/jquery-3.3.1.min.js"></script> <style> * { mar原创 2020-07-21 16:51:16 · 526 阅读 · 0 评论 -
svg实现直线带右箭头
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg实现直线带右箭头</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; /*保证盒子的大小原创 2020-07-21 16:34:08 · 1100 阅读 · 0 评论 -
svg实现直线带左箭头
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg实现直线带左箭头</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; /*保证盒子的大小原创 2020-07-21 16:33:34 · 592 阅读 · 0 评论 -
svg实现直线带双向箭头
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg实现直线带双向箭头</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; /*保证盒子的大原创 2020-07-21 16:25:29 · 761 阅读 · 0 评论 -
css实现四角边框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类实现四角边框</title> <style> #div1 { position: relative; width: 100px; height: 100px;转载 2020-06-03 14:42:39 · 1089 阅读 · 0 评论 -
使用scale缩放字体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding...原创 2020-05-06 14:58:24 · 1660 阅读 · 0 评论 -
渐变颜色在火狐上无法显示,原因是火狐对fill: url(#)的支持有差异
https://stackoverflow.com/questions/15123953/svg-fill-url-behaving-strangely-in-firefox转载 2020-04-15 20:12:09 · 443 阅读 · 0 评论 -
Flex布局实现table
https://stackoverflow.com/questions/48570109/layout-a-flex-box-similar-to-a-table<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...原创 2020-04-09 10:05:39 · 6128 阅读 · 0 评论 -
css_使用svg实现文本颜色渐变_兼容IE浏览器
https://stackoverflow.com/questions/52356677/issue-with-linear-gradient-on-svg-text<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg实现文本颜...转载 2020-03-15 11:48:21 · 493 阅读 · 0 评论 -
css_使div中的文本自动换行
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...转载 2020-03-15 11:37:52 · 5933 阅读 · 2 评论 -
css_使嵌套的div显示在容器的底部
https://stackoverflow.com/questions/14900393/moving-nested-div-to-bottom-corner-with-css转载 2020-03-14 11:40:34 · 908 阅读 · 0 评论 -
如何使div垂直居中,以及水平居中
详见https://stackoverflow.com/questions/2743989/how-to-vertically-center-divs<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title...转载 2020-03-12 11:29:05 · 102 阅读 · 0 评论