border-radius | 易学教程

响应式布局媒体查询法

阅读更多关于响应式布局媒体查询法

媒体查询法响应式布局先看看具体的效果如下图，在不同大小的端口适应各种设备：既然是响应式布局当然得用弹性盒子和定位，比例和百分比才是适应各个设备的关键之一，因为制作的目的主要是理解媒体查询该怎么用这里就没有涉及到js部分。制作方法： 1. 首先先写pc端口的样式，运用flex和position将基本样式写好。 2. 当写好这个基本样式就是媒体查询的重要步骤之一：先将下列代码添加入html文件head中 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这列代码的作用是让视口形成自适应，首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale

Vue造轮子-popover组件(下)

阅读更多关于 Vue造轮子-popover组件(下)

1. 上一次的问题总结。 overflow:hidden -> body.appendChild 关闭重复 -> 分开,document 只管外面,popover 只管里面忘了取消监听 document -> 收拢 close 2. 可以把一个函数哟没有五行作为一个优化的标准,简称为五行定律 3. 接下来把样式改好点 .content-wrapper { // 如果写了scoped,popover里面那么就只作用于popover里面,移到外面就在外面了就可以 position: absolute; border: 1px solid $border-color; border-radius: $border-radius; filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)); /*通过drop-shadow解决小三角没有阴影的问题，但是兼容性不好 */ /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);*/ background: white; transform: translateY(-100%); margin-top: -10px; padding: .5em 1em; max-width: 20em; word-break: break-all; &::before , &::after{

Vue造轮子-popover组件(下)

阅读更多关于 Vue造轮子-popover组件(下)

圆角矩形

阅读更多关于圆角矩形

border:redius:左上右上右下左下; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .box1 { width:150px; height:45px; border:1px solid blue; box-shadow: 1px 1px 1px 1px lightblue; border-radius: 10px 10px 10px 10px; margin-bottom: 60px; } .box2 { width:150px; height:45px; border:1px solid blue; box-shadow: 1px 1px 1px 1px lightblue; border-radius: 20px 20px 20px 20px; margin-bottom:60px; } .box3 { width:150px; height:45px; border:1px solid blue; box-shadow: 1px 1px 1px 1px lightblue; border-radius: 0 20px 0 0; margin-bottom:

十分钟入门 Less

阅读更多关于十分钟入门 Less

我们都知道写 CSS 代码是有些枯燥无味的，尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护，但它本不应该这样的。很幸运，网站开发社区已经解决了这个问题，现在我们拥有诸如 Less , Sass 和 Stylus 之类的预处理器，它们给我们提供了许多优于纯 CSS 的好处。变量 - 它可以让你更轻松的在整个样式表中定义和更改值（这个功能 CSS 在未来某一天也有可能会实现）。动态计算值 - CSS 中最近出了一个 cal() ，但它只适合用于长度的计算。 Mixins - 可以让你重用或者组合样式，而且支持传递参数。函数 - 它为你提供了一些方便的程序去操纵颜色，转换图像等。使用预处理器的唯一缺点就是，你需要将代码转换为纯 CSS 代码，让它能够在浏览器中工作。 1. Getting Started Less 是用 JavaScript 写的，所以需要额外的 Node.js 或者网页浏览器才能够运行它。你可以在你的网站中引入 less.js ，这样在真正的运行环境下它就可以自动编译，但这个过程非常缓慢，所以不建议这么使用。推荐的方式是提前编译成 CSS 代码并且将一个正常的发展版本备份在线上。当然还有很多可视化的的程序帮助你编译 less 文件

CSS中设置元素的圆角矩形

阅读更多关于 CSS中设置元素的圆角矩形

CSS中设置元素的圆角矩形圆角矩形介绍在 CSS 中通过 border-radius 属性可以实现元素的圆角矩形。 border-radius 属性值一共有 4 个，左上、右上、左下、右下。 border-radius 属性值规则如下：第一个值为左上、第二个值为右上、第三个值为左下、第四个值为右下。假如 border-radius 属性值都是一致的我可以设置一个属性值即可。圆角矩形实践圆角矩形基本使用方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圆角矩形</title> <style> div{ width: 100px; height: 100px; border: 2px solid rebeccapurple; border-radius: 10px 20px 30px 40px; } </style> </head> <body> <div></div> </body> </html> 如果我们的 border

css3实现时钟效果

阅读更多关于 css3实现时钟效果

css3实现时钟效果 <div class="clock"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="cover"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="center"></div> </div> * { padding : 0 ; margin : 0 ; } .clock { width : 300px ; height : 300px ; border : 10px solid #ccc ; /*border-radius: 160px;*/ /*百分比参照元素的实际宽高*/ border-radius : 50% ; margin : 100px auto ; position : relative ; } .line { width : 8px ; height :

[css]我要用css画幅画(四)

阅读更多关于 [css]我要用css画幅画(四)

接着之前的 [css]我要用css画幅画(三) ，今天，我画了两朵云，并给小明介绍了个朋友：静静。 github： https://github.com/bee0060/Css-Paint ，完整代码在pages/sun-house-4.html和相关的css中可以找到 demo： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-4.html 完整html如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css Paint</title> 6 <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/cloud.css" /> 10 </head>

用css3实现各种图标效果

阅读更多关于用css3实现各种图标效果

原文: 用css3实现各种图标效果公共样式应该说现在绝大多数公司的项目前端都是一团乱，不仅仅是js写的没有任何框架而言，css同样也是如此，导致项目如果要升级或者说有新的变更维护起来就特别困难。最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。首先我们在整理样式之前，必须得有一个自己团队的规范。思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再动手，否则就可能做到一半发现这样不对，然后前面的工夫全白费了，这样启不是。。。前面说了一堆费话，下面就简单点来介绍一下我整理的图标（全部用css来实现的）。 css没有继承、多态等，所以为了write less ,do more就不得不想尽各种方法（我们自己规定凡是公共的、组件级别的样式全部以u-开头）。我这里因为写所有标签的样式名都是以u-icon开头，所以写了如下样式，这样的话所有的以u-icon开头的全部都应用了如下三个样式，你想如果你有100个u-icon的样式那就省去了你300行代码呀！ [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 手机上的切换标签 css样式代码： /*手机上的切换标签*/ .u-icon

用css3实现各种图标效果（2）

阅读更多关于用css3实现各种图标效果（2）

原文: 用css3实现各种图标效果（2）写在前面写的一模一样的css样式，结果却导致原来出来不一样的效果图。用chrome的开发者工具查看，比较起来还是一模一样的css样式，可为什么会出现不一样的placeholder效果呢？一个白色粗体，一个灰色正常字体。找了老半天找不到原因后来才发现是我同事写的框架css里面代码的一句话影响到了 ::-webkit-input-placeholder { color: #a4afc6; } 可是为什么在chrome控制台看不到这句代码呢？请教了一番同事，原来是这样的。 1、点击控制台“设置”按钮 2、按如下所示设置，选中“Show user agent shadow DOM” 3、你就会在elements控制面板里面能看到如下所示回归正题，继续我的css各种图标。。。。当然在开始之前，还是加上如下这段公共样式吧！ [class^="u-icon"] { display: inline-block; color: #fff; vertical-align: middle; } 各种删除按钮（不用图标只能css来实现） html代码如下： <span class="u-icon-radioDelete"></span> <span class="u-icon-deleteToggle Orange"> <span class="u

订阅 border-radius