border

css样式美化 下拉框 select 样式

由 ≯℡__Kan透↙ 提交于 2020-01-10 06:56:48
本文转载自： https://www.cnblogs.com/dazhangli/p/6428039.html 作者：dazhangli 转载请注明该声明。 < span class ="setleft wid80" >< span class ="fyhbx" > * </ span > 入库类型 : </ span > < div class =" posirelative select-out-div" > < select class ="m-wrap " style ="width: 180px; padding: 2px 0;" > < option value ="0" > 采购 </ option > < option value ="1" > 返货 </ option > < option value ="2" > 移库入货 </ option > </ select > < span class ="select-hide-span" > < b class ="select-show-b" ></ b ></ span > </ div > .posirelative { position : relative ; } .select-out-div { width : 160px ; overflow : hidden ; } select.m-wrap {

sass教程

由 ♀尐吖头ヾ 提交于 2020-01-10 03:54:52
变量声明 任何用作css属性值的赋值都可以用sass的变量值 $nav_width:100px; .box{ width:$nav_width; height:100px; } 编译后 .box{ width:100px; height:100px; } 也可以用空格分隔多个属性值,或者用逗号分隔多个属性值 $border-style:1px solid red; $plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif; 变量引用 $nav-bgStyle:#eee; .nav{ border:1px solid $nav-bgStyle; background:$nav-bgStyle; } //编译后 .nav{ border:1px solid #eee; background:#eee; } 在声明变量时，变量值也可以引用其他变量 $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //编译后 .selected { border: 1px

CSS盒模型

由 元气小坏坏 提交于 2020-01-10 02:27:14
三种盒模型，即box-sizing三个取值 box-sizing:border-box; 宽度计算=content+padding+border box-sizing:padding-box; 宽度计算=content+padding box-sizing:content-box; 宽度计算=content 边框 div { border : 2px solid red ; } 可拆分 可单独设置 border-top、border-right 等 来源： CSDN 作者： 糖小昔 链接： https://blog.csdn.net/weixin_44774877/article/details/103913519

HTML基础

由 丶灬走出姿态 提交于 2020-01-10 00:45:12
1.h1~h6 p b i br <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一个html页面</title> </head> <body> <h1 align="right">这是h1</h1> <h2 align="center">这是h2</h2> <h3>这是h3</h3> <h4>这是h4</h4> <h5>这是h5</h5><h6>这是h6</h6> <p align="center">段落1</p> <p>段落2</p> <p>段落3</p> <!-- 字体加粗 和 斜体 br换行--> <b>abc</b><br><i>abc</i> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h1 align="center">个人简历</h1> <h2>基本信息</h2> <p>姓名：苍老师</p> <p>性别：男</p> <p>爱好：男</p> <h2>个人经历</h2> <p>2019年最佳男演员<br>2019年男神评比底一名</p> </body> </html> 2.无须列表 有序列表 定义列表

Create wavy borders in CSS for top and bottom borders

由 百般思念 提交于 2020-01-09 11:46:42
问题 I'm trying to create a wavy top and bottom border like the image here I tried recreating the same effect using the following code .wave{ background: white; height: 25px; position: relative; } .wave::before, .wave::after{ border-bottom: 5px solid rgba(237, 30, 30, 1); } .wave::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-size: 20px 40px; background-image: radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px); }

Create wavy borders in CSS for top and bottom borders

由 六月ゝ 毕业季﹏ 提交于 2020-01-09 11:46:13
问题 I'm trying to create a wavy top and bottom border like the image here I tried recreating the same effect using the following code .wave{ background: white; height: 25px; position: relative; } .wave::before, .wave::after{ border-bottom: 5px solid rgba(237, 30, 30, 1); } .wave::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-size: 20px 40px; background-image: radial-gradient(circle at 10px -15px, transparent 20px, rgba(237, 30, 30, 1) 21px); }

DOM盒模型和位置 client offset scroll 和滚动的关系

由 流过昼夜 提交于 2020-01-09 10:30:30
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值， pading border margin width height client clientWidth 不要border clientHeight 不要border offset offsetTop offsetLeft offsetWidth 要border offsetHeight 要border scroll scrollTop scrollHeight scrollLeft scrollWidth 盒模型 生产环境一般使用 box-sizing: border-box, 效果： width == content.width + pading + border height == content.height + pading + border .antd-pro-pages-test-dom-index-box { box-sizing: border-box; width: 100px; height: 100px; padding: 5px; border-color: grey; border-style: solid; border-width: 5px; margin: 5px; } 滚动 <div class="container1"

less 学习笔记

由 拟墨画扇 提交于 2020-01-09 09:36:00
一、介绍 Less （Leaner Style Sheets 简洁的样式表） 是一门向后兼容的 CSS 预处理语言 ，它扩展了CSS 语言。 less is more. 好处： 1、具有部分编程语言的功能，提高编码效率 2、提供模块化 3、结构清晰、易于拓展 4、完全兼容 css 缺点： 1、学习成本提高了些 2、让调试变的复杂起来（但其实有办法解决，不赘述了） 几种 css 预处理语言的诞生先后顺序： Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。 Less 诞生于 2009 年， 受 Sass 的影响 创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。 二、安装 & 使用 less 即可在客户端运行，也可在服务器端运行。 1、在 Node.js 环境 ： npm install -g less > lessc styles.less styles.css 2、在浏览器环境 ： <link rel="stylesheet

Firefox 4 : Is there a way to remove the red border in a required form input?

由 醉酒当歌 提交于 2020-01-09 06:14:55
问题 When required is defined in a form field, Firefox 4 automatically shows a red border to this element, even BEFORE the user hits the submit button. <input type="text" name="example" value="This is an example" required /> I think this is disturbing for the user as he/she asn't made mistakes at the beginning. I wnat to hide that red border for the initial state, but show it when the user hits the send button if there is a missing field marked as required. I looked at :required and :invalid from

Firefox 4 : Is there a way to remove the red border in a required form input?

由 自古美人都是妖i 提交于 2020-01-09 06:13:24
问题 When required is defined in a form field, Firefox 4 automatically shows a red border to this element, even BEFORE the user hits the submit button. <input type="text" name="example" value="This is an example" required /> I think this is disturbing for the user as he/she asn't made mistakes at the beginning. I wnat to hide that red border for the initial state, but show it when the user hits the send button if there is a missing field marked as required. I looked at :required and :invalid from
订阅 border