border-radius | 易学教程

微信小程序之自定义单选框radio和复选框和checkbox的样式

阅读更多关于微信小程序之自定义单选框radio和复选框和checkbox的样式

刚开始小程序出来那会研究过自定义radio和checkbox的样式，在后来的升级中，原先写的样式出现了一些问题，例如： 1、未选中和选中时按钮大小不一，导致view盒子高度变化，出现晃动； 2、选中后出现按钮还有原始的默认背景（绿色）；这是升级后的，主要还是觉得自定义样式能使我们在小程序的开发中减少图片的加载以及内存；同时后期的维护也更加便利；更改radio的样式，效果如下图： wxml: <view class='item ft-30 h90 flex flex-vc bd-bt-f4f pd-lt20 pd-rt20'> <label class='item-left color-333 mg-rt10' for='sex'>性别：</label> <radio-group class="item-right radio-group" bindchange="changeSex"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}} </label> </radio-group> </view> css: /* 自定义 radio 样式 */ radio{ width: 38rpx; } radio

MyFirstJavaWeb

阅读更多关于 MyFirstJavaWeb

源代码： Register.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>注册页面</title> <script type="text/javascript"> function check(form) { with (form) { if (username.value == "") { alert("用户名不能为空"); return false; } else if (password.value == "" || password1.value == "") { alert("密码不能为空"); return false; } else return true; } } </script> <style> .a { border: 2px solid #a1a1a1; padding: 10px 40px; /* background:#dddddd; */ width: px; border-radius: 25px; }

太极图

阅读更多关于太极图

<div class="taiji"></div> .taiji { width: 140px; height: 280px; border-radius: 100%; /* background-color: red; */ border: 2px solid black; border-left: 140px solid black; position: relative; } .taiji::before { content: ""; position: absolute; right: 50%; top: 0; width: 40px; height: 40px; border-radius: 100%; background: black; border: 50px solid #ffffff; } .taiji::after { content: ""; position: absolute; right: 50%; bottom: 0; width: 40px; height: 40px; border-radius: 100%; background: #fff; border: 50px solid black; } 1. .taiji { width: 140px; height: 280px; border-radius: 100%; /*

sass用法总结（持续更新中）

阅读更多关于 sass用法总结（持续更新中）

官网：https://www.sass.hk/ 1，混合器：　　可以通过 sass 的混合器实现大段样式的重用 @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; } //sass最终生成： .notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } 　　在 .notice 中的属性 border-radius -moz-border-radius 和 -webkit-border-radius 全部来自 rounded-corners 这个混合器。　　混合器使用 @mixin 标识符定义。然后就可以在你的样式表中通过 @include 来使用这个混合器，放在你希望的任何地方。 @include 调用会把混合器中的所有样式提取出来放在 @include

css3画半圆的两种方法

阅读更多关于 css3画半圆的两种方法

<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>Document</title> <style> * {margin: 0; padding: 0;} .clearfix{zoom:1;/*为IE6，7的兼容性设置*/} .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; } ul li { list-style: none; float: left; margin: 50px 0 50px 20px; text-align: center; } li { background: red; } h2 { margin-top: 20px; } .circle1 { width: 100px; height: 50px; border-radius: 50px 50px 0 0; line-height: 50px; } .circle2 {

差点就错过你

阅读更多关于差点就错过你

之前一直有个想法，想要建立一个自己的个性博客，考虑过github建立博客，看了看步骤，放弃了偶然发现一下好看的博客，怎么都是cnblogs，然后发现了一个新的世界，昨晚兴奋滴久久不能入眠。推荐一下美化博客的链接好吧，更改我这样子的博客，找不到了-_-! 就把相应代码放在这里吧！定制化如果看着自己博客哪里不舒服，就按F12打开浏览器的调试界面，可以具体看看其属性，改改看看效果，如果可以，在更新到后台这里（html小白，表示也会了）。博客皮肤选择：ThinkInside 页面定制css代码 /*主页面样式*/ html{_background-image:url(none.jpg)}body{background:#EBEDF0 url(http://images.cnblogs.com/cnblogs_com/kingwell/389641/o_debut-light.png) repeat 0 0;color:#555;font:normal normal normal 12px/1.5 Ubuntu,Ubuntu, Helvetica, sans-serif,'\5B8B\4F53';margin:0;padding:0}a,abbr,acronym,address,applet,article,b,big,blockquote,button,canvas

纯CSS绘制的图形一览

阅读更多关于纯CSS绘制的图形一览

整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭，哈哈 Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle(圆形) #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */ Oval(椭圆形) #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */ Triangle Up(向上的三角形) #triangle-up {

现在SimpleMemory的CSS(by BNDong)

阅读更多关于现在SimpleMemory的CSS(by BNDong)

#EntryTag{margin-top:20px;font-size:9pt;color:gray}.topicListFooter{text-align:right;margin-right:10px;margin-top:10px}#divRefreshComments{text-align:right;margin-right:10px;margin-bottom:5px;font-size:9pt}*{margin:0;padding:0}html{height:100%;max-height:100%;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{background-color:#fff;font-size:12px;max-height:100%;font-family:"Merriweather","Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif;color:#3a4145;-moz-font-feature-settings:'kern' 1;-o-font-feature-settings:'kern' 1;overflow:hidden}body:before{content:'';display

Bootstrap Sass使用

阅读更多关于 Bootstrap Sass使用

简介 Sass相比Less 功能更加强大使用起来也相对复杂同样也可以用koala(见上篇)来编译. 安装 Sass是由Ruby编写的所以想使用Sass必须要先下载Ruby Ruby只是为Sass运行提供支持不懂Ruby也不碍事安装好Ruby之后再从官网下载Sass 就可以使用了 Sass用法 1 变量 Sass通过美元符号使用变量 //Sass源码 $highlight-color: #000000; .selected { border: 1px solid $highlight-color; } //编译后的CSS .selected { border: 1px solid #000000; } 2 嵌套 Sass的嵌套和Less相同直接写在里面就好了 3 代码重用 @mixin @include @extend @function @import Sass可以用 @mixin 来定义代码块然后用 @include 来复用 @mixin同样也支持参数 //Sass源码 @mixin border-radius($radius){ -moz-border-radius:$radius; -webkit-border-radius:$radius; border-radius:$radius; } button{ @include border-radius

Bootstrap Less的使用

阅读更多关于 Bootstrap Less的使用

简介由于CSS 无法定义变量以及冗余重复的代码在大项目中编写CSS会有很多重复于是有了更高级的预处理语言 Less和Sass Less相比Sass 使用更方便简洁而Sass拥有更强大的功能编译工具 Less 和 Sass 都需要经过编译生成CSS 才可以使用经常使用的编译工具是koala 这儿给出Linux下64位最新版本koala_2.3.0_x86_64 其他版本官网自行下载链接: https://pan.baidu.com/s/14F1himmYeHORxyNX-ooonQ 密码: ufvo Less用法 (需要先下载Less) 1 Less使用 @ 定义和引用变量 //Less 源码@color:#ffffff; #header{ color: @color; } //经过Koala编译后 #header { color: #ffffff; } 2 使用混合上面提到正是由于CSS 重复的代码才导致Less和Sass 的出现因此Less可以实现代码复用 //Less源码 .rounded-corners(@radius:5px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; -o-border-radius: @radius; border-radius:

订阅 border-radius