border-radius | 易学教程

css元素水平居中和垂直居中的方式

阅读更多关于 css元素水平居中和垂直居中的方式

关于居中的问题，一直处于疑惑不解的状态，知道的几种方法好像也不是每一次都会起到作用，所以更加迷惑。主要是不清楚该在什么情况下采用哪种解决方法，所以，整理了一些方法，梳理一下思路，做一个总结。 1. line-height使单行文本垂直居中对于单行文本，可以设置它的行高等于它父容器的高度，这样就实现了该文本的垂直居中，但是此方法只适用于单行文本。（其实严格意义上来说，文字并不是绝对的垂直居中的，有那么很小的几像素差距，只是我们看上去它是居中的；这里的原因，就是文本的基线对齐的因素了，感兴趣的朋友可以再深入地去了解一下，这里我就不展开了）平时这样用就可以了。对于多行文本，设置line-height就无法实现了，在这里有一个方法比较好。还记得刚学习html的时候，大家应该都记得表格table吧，在每一个单元格里，如果我们想要让里边的文本垂直居中的话，用到的属性是 vertical-align：middle；所以在多行文本的情况下，就可以用的这个属性。前提条件是，我们需要给文本再加一层标签，这里在 box3 中，我用 span 标签把文字包了起来。给 span 的父级元素 div.box3 设置 display:table；给 span 设置display:table-cell;vertical-align:middle; 就可以了。这里我没有考虑IE低版本兼容性问题

侧边固定导航效果

阅读更多关于侧边固定导航效果

之前在项目中做过这么个侧边固定导航效果，把它摘下来，总结下。实现： 1.当页面滚动到主体部分时，侧边导航固定在浏览器的左上方，且在主体部分内滚动时才固定在浏览器的左上方，当侧边导航滚动到主体底部时，侧边导航回到最初状态 2.当页面滚动到右侧内容相应区域时，侧边对应按钮高亮 2.点击左侧导航按钮，页面会滚动到导航对应的内容图： 1.结构样式简单的说下侧边导航和右侧主体部分分别左右浮动。侧边导航代码是动态生成的 2.jquery思路 (1).首先侧边导航的个数与右侧的主体的标题的个数是相同的， var subcont_length = $(".subcont").length;//获取主题标题的个数 (2). 滚动条滚动到一定位置，侧边导航固定在浏览器的左上角判断条件：最小滚动：侧边导航的.offset().top减去侧边导航固定的top值最大滚动：父元素的高度+父元素的.offset().top减去侧边导航自身的高度 (3)侧边导航滚动高亮判断条件：向下滚动，只要下一区域内容滚到侧边导航底部位置，这一区域对应导航就高亮；向上滚动，只要上一区域内容出现到侧边导航底部位置，这一区域对应导航就高亮 (4)侧边导航点击导航按钮，按钮高亮，网页滚动到到相应区域 3.附录（代码） <!DOCTYPE> <html> <head> <meta charset="utf-8" />

盒子模型（div标签）以及其属性

阅读更多关于盒子模型（div标签）以及其属性

盒子模型（div标签）作用：用于网页布局[画盒子] 组成：内容区域边框内边距：内容区域与边框之间的距离外边距：盒子与盒子之间的距离盒子模型相关属性边框属性（border）设置边框的样式(没有|实线|点线|虚线|双实线) border - style : none ( 默认 ) | solid | dotted | dashed | double ; 设置边框宽度 border - width : ~ ~ px ; 设置边框颜色 border - color : red ; 边框属性的联写： border : 样式宽度颜色；顺序和个数任意，省略的部分取默认值也可以单独设置某一条边框的样式或者单独指定每一个边框的样式去掉边框的方法： border - style : none ; 或者 border : none ; 或者 border - top : none ; 去掉边框input轮廓线 outline - style : none ; 点击文字也能设置控件光标圆角边框 border - radius： 50 % ； border - radius : 水平半径参数 / 垂直半径参数 ( 满足上右下左的顺序 ) （水平和垂直半径参数均包含四个参数，分别对应矩形的四个圆角的水平和垂直半径参数） border - radius : 20 px 30 px

css3实战汇总（附源码）

阅读更多关于 css3实战汇总（附源码）

css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。我们将学到 box-shadow的高级应用制作自适应的椭圆纯css3实现饼图进度动画用border来实现一个对话框样式 css3 filter的简单应用 css3伪元素实现自定义复选框在线制作css3动画的利器正文 1.box-shadow的高级应用利用css3的新特性可以帮助我们实现各种意想不到的特效，接下来的几个案例我们来使用css3的box-shdow来实现，马上开始吧！实现水波动画知识点：box-shadow 想想我们如果不用css3，是怎么实现水波扩散的动画呢？想必一定是写一大堆的js才能实现如下的效果： css3实现核心代码 <style> .wave { margin-left: auto; margin-right: auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid #fff; text-align: center; line-height: 100px; color: #fff; background: #06c url

vue --- 全局弹窗，只调用对应实例

阅读更多关于 vue --- 全局弹窗，只调用对应实例

login.js import Vue from 'vue' import login from '@/components/login.vue' const loginBox = Vue.extend(login) login.install = function (data) { let instance = new loginBox({ data }).$mount() document.body.appendChild(instance.$el) Vue.nextTick(() => { instance.show = true // show 和弹窗组件里的show对应，用于控制显隐 }) } export default login login.vue <template> <view class="mask" v-if='show'> <view class="content"> <div class="content1"> <div class="title"> 巴拉巴拉 </div> <div class="bx_img"></div> <div class="bx_num">+1</div> <div class="des">快去给你喜欢的选手比个心吧！</div> <div class="btn" @click.stop="onClick">开心收下</div

5个CSS3技术实现设计增强

阅读更多关于 5个CSS3技术实现设计增强

层叠样式表(css) 是Web设计的一种语言，CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢？虽然还有一些新属性没有得到官方的确认，但是一些浏览器已经开始支持来自CSS3得新特性了。　　但问题是——许多浏览器支持了，唯独最主要的Internet Explorer浏览器仍不支持！　　很多人尤其是中国的前端er们会觉得既然IE不支持，那就先不关心CSS3。其实不应这样的，CSS3现在能为我们带来什么好处呢？至少现在我们就能使用那些CSS3的新特性来进行设计增强.设计增强是指在不影响网站可用性的基础上，使用一些高级样式来提升网站的视觉效果。其实对于如何区分设计增强与不影响可用性的区别还是有一定的困难的: 设计增强的例子：使用border-radius属性为盒模型添加圆角，让网站更富有吸引力。不过，即使圆角属性不被浏览器支持，它也不会影响网站的正常使用。设计消弱可用性的例子：在某个元素上面层叠了一个使用了RGBA颜色值背景的元素，上面的元素使用半透明效果，很显然这两个元素都是必须让用户看到的。很显然，有一部分使用旧浏览器的用户想要看到下面的元素内容是很困难的，这种设计就降低了可用性。一同学习 5个不同的CSS3属性，如果从现在起你就开始尝试在你的网站中使用它们，那你将让你的网站实现既设计增强又不会消弱可用性。　

CSS矩形、三角形等

阅读更多关于 CSS矩形、三角形等

1、圆形 CSS代码如下：宽高一样，border-radius设为宽高的一半 #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 2、椭圆 CSS代码如下：border-radius:水平半径/垂直半径 #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 3、等边三角上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 4、直角三角

web前端入门到实战：CSS实现雨滴动画效果

阅读更多关于 web前端入门到实战：CSS实现雨滴动画效果

玻璃窗今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); background-size: cover; background-position: 100%; filter: blur(10px); } 其实就是给一张图片，做了个模糊化的效果，看起来像毛玻璃的效果一滴雨雨滴的效果就很巧妙了，让我们看下一滴雨完整的效果图这滴雨其实分为两个部分，第一部分是底部的阴影部分，其实是个边框来的，代码如下：专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） .border { position: absolute; margin-left: 92px; margin-top: 51px; border-radius: 100%;

HTML 学习笔记 CSS3(Animation)

阅读更多关于 HTML 学习笔记 CSS3(Animation)

CSS3动画：通过CSS3 我们能够创建动画这可以在许多网页中取代动画图片 Flash动画以及JavaScript。 CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。同样的先看一个例子： <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #animationDemo { width: 100px; height: 100px; background: red; position: relative; } #animationDemo:hover { animation: myAnimation 5s; } @keyframes myAnimation{ 0%{background: red; left: 0px; top: 0px; border-radius: 0px;} 25% {background: yellow; left: 200px; top: 0px; border-radius: 25px;} 50% {background: blue; left:

Less 简介

阅读更多关于 Less 简介

什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。语言特性快速预览：变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 LESS源码： @color: #4D926F; #header { color: @color; } h2 { color: @color; } 编译后的CSS： #header { color: #4D926F; } h2 { color: #4D926F; } 混合（Mixins）混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。 LESS源码： .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius:

订阅 border-radius