border-radius | 易学教程

border-radius实例1

阅读更多关于 border-radius实例1

简单参数设置一 1.html <div class="paddingBig"> <div class="divSmall radiusOne"></div> <div class="divSmall radiusTwo"></div> <div class="divSmall radiusThree"></div> <div class="divSmall radiusFourth"></div> <div class="clear"></div> <div class="blank"></div> <div class="divSmall radiusFive"></div> <div class="divSmall radiusSix"></div> </div> 2.css .divSmall { float: left; margin-right: 30px; border: 2px solid blue; } /*只取一个值，四角居右相同的圆角设置*/ .radiusOne { border-radius: 10px; } /*设置两个值，先左上右下，再右上左下*/ .radiusTwo { border-radius: 5px 30px; } /*设置三个值，先左上，再右下，再右上左下*/ .radiusThree { border-radius: 5px 15px

用canvas画布画一个画板

阅读更多关于用canvas画布画一个画板

　　前段时间，在对H5的回顾中突然对canvas有了感觉，闲来无事便对其进行了一些捯饬。这不，上周我还做了一个好玩的画板呢，废话不多说，直接上代码(PS：翠花，上代码~)： HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 制作画板</title> <style> h1{ text-align: center; margin: 0 auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .drawBox{ width: 830px; height: auto; margin: auto; background: #999; border-radius: 10px; } #myCanvas{ padding: 0; background: #fff; display: block; cursor: pointer; border-radius: 10px; border: 15px solid #999; }

微信小程序轮播中间大两边小

阅读更多关于微信小程序轮播中间大两边小

wxml：  <view class="swiper"> <swiper autoplay="{{autoplay}}" previous-margin="{{previousMargin}}" next-margin="{{nextMargin}}" circular="true" interval="{{interval}}" duration="{{duration}}" bindchange="handleChange"> <block wx:for="{{background}}" wx:key="*this"> <swiper-item class="swiper-items"> <view class="swiper-item {{currentIndex !== index ? 'active':''}}"><image src="{{item}}"></image></view> </swiper-item> </block> </swiper> </view> js: data:{ background:[], vertical: false, autoplay: true, interval: 2000, duration: 500, previousMargin:'50rpx', nextMargin:'50rpx',

less css框架的学习

阅读更多关于 less css框架的学习

什么是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:

H5填坑笔记--持续更新

阅读更多关于 H5填坑笔记--持续更新

　　最近一直在做移动端的页面，发现很多的坑，这里做一下总结，填填坑…… css常见的问题（一）一、iOS键盘首字母自动大写　　IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。　　在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样： <input type="text" autocapitalize="off" /> 二、iOS输入框默认内阴影和样式问题　　在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭，不过加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改： input, textarea { border: 0; -webkit-appearance: none; } 三、andriod输入框type = "number"存在样式问题去除input[type=number]的默认样式 input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。

阅读更多关于纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦。其中绝大部分涉及到CSS3中的border-radius，text-shadow， transform 等一些比较复杂的属性，所以需要有一点CSS3基础的最好。特别注意的是此效果不兼容IE<9的浏览器，最好用firefox，chrome等浏览器。以下案例都由本人亲自测试，希望好学您也可以一一测试一下。 1.正方形正方形 1 #square {2 width: 100px;3 height: 100px;4 background: red;5 } 2.长方形长方形 1 #rectangle {2 width: 200px;3 height: 100px;4 background: red;5 } 3.圆形圆形 1 #circle {2 width: 100px;3 height: 100px;4 background: red;5 -moz-border-radius: 50px;6 -webkit-border-radius: 50px;7 border-radius: 50px;8 } 4.椭圆椭圆 1 #oval {2 width: 200px;3 height: 100px;4 background: red;5 -moz-border-radius: 100px / 50px

前端——模拟简书首页静态实现

阅读更多关于前端——模拟简书首页静态实现

目标: 实现简书首页的静态展示效果: 代码 : html < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > 简书 - 创作你的创作 < / title > < link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon" > < link rel = "stylesheet" href = "css/index.css" > < meta name = "keywords" content = "简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读" > < meta name = "description" content = "简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。" > < / head > < body > < ! -- 头部导航 -- > < nav id = "nav" > < div class = "nav-content" > < ! -- 左边 -- > < div class = "nav-content-l" > <

CSS pusle雷达动画实现

阅读更多关于 CSS pusle雷达动画实现

思路同时改变透明度和圆圈的大小，无限循环 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> @keyframes warn { 0% { transform: scale(0); opacity: 0.0; } 25% { transform: scale(0); opacity: 0.1; } 50% { transform: scale(0.1); opacity: 0.3; } 75% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.0; } } .container { position: relative; border: 1px solid #000; background: #f55e55; } .part { position: relative; margin: 200px auto; width: 90px; height: 90px; background: #f55e55; } /* 产生动画（向外扩散变大）的圆圈 */ .pulse-max

如何用 CSS 创作一个立体滑动 toggle 交互控件

阅读更多关于如何用 CSS 创作一个立体滑动 toggle 交互控件

效果预览在线演示按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cPvMzTg 源代码下载本地下载请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/005-sleek-sliding-toggle-checkbox 代码解读定义 dom，是嵌套了3层的容器： <div class="checkbox"> <div class="inner"> <div class="toggle"></div> </div> </div> 居中显示： html, body, .checkbox, .checkbox .inner, .checkbox .inner .toggle { height: 100%; display: flex; align-items: center; justify-content: center; } 画出外侧椭圆： .checkbox { width: 10em;

自定义滚动条使用（scrollbar样式设置）

阅读更多关于自定义滚动条使用（scrollbar样式设置）

转自： https://segmentfault.com/a/1190000012800450 PS:非商业用途，如有侵权，请联系删除。一前言在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。有时候我们需要自定义滚动条的样式，比如一开始就它显示，比如想改变滚动条的颜色，设置轨道的样式等，那么这篇文章就是为你准备的。二正文 1.认识滚动条设置scrollbar的为CSS伪元素，对应上图的数字： ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit

订阅 border-radius