border-radius | 易学教程

标准 DOM 盒模型与 IE 盒模型

阅读更多关于标准 DOM 盒模型与 IE 盒模型

包括四个部分：margin>border>padding>content 在标准DOM盒模型中，dom 的 width 和 height 仅作用于content （IE6 及早期版本的IE7 下 width 和 height 包括了 border 和 padding）因此，一个html元素占据的空间不是width和height，而是这四个部分的加总，另外，由于margin没有内容无法看到(相邻元素都有margin时，你无法凭肉眼确定 dom 占据范围的边界)，如果你设置了border，那么肉眼所见的 DOM 形状就是border>padding>content三项的加总，但是，所占据的空间仍是四项的加总。使用标准盒模型的文档渲染模式有: document.compatMode = "CSS1Compat" 非标准模式(quirke) 下： document.compatMode = "BackCompat" 为了使用 IE 浏览器使用标准模式，可以使用下面的做法： 1、添加文档声明 <!DOCTYPE html> 2、 < meta http-equiv="X-UA-Compatible" content=" IE =edge, chrome=1"> outline 属性：盒模型的outline属性是包围在border外面的边线，设置方法跟border一样

stylus富于表现力、动态的、健壮的 CSS

阅读更多关于 stylus富于表现力、动态的、健壮的 CSS

1.介绍 CSS 预处理预处理框架，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。 2.安装 Stylus 首先，安装 stylus，win+r打开cmd（确保之前已经安装 nodejs ，cmd下输入node -v，回车提示node版本号），-g代表全局安装。 npm install stylus -g 3.获得相关的命令行支持 stylus -h 4.如何将stylus编译成css文件 stylus stylus.styl -o style.css 项目stu目录下新建一个css文件夹用来存放css文件，再新建一个stylus文件夹用来存放stylus文件。在stylus文件夹下新建test1.styl文件,里面添加（stylus语法代码，来自官网） border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button

微信小程序按钮

阅读更多关于微信小程序按钮

微信小程序button组件样式韦弦Zhy 关注 22018.07.03 19:21:14字数 438阅读 108,988 button.png 上图下字.png 需要使用微信小程序 button组件的 open-type 来实现授权之类的操作时，发现样式并不是自己想要的，然后改起来也并不是很方便，下面让我们一起看一下：默认状态 <button>确定</button> 此时，各项值均为默认值，效果如下：有边框以及圆角默认状态.png 设置其css如下：背景颜色 background-color 文字颜色 color ,设置 type 为 primary 是背景色为微信绿，无法设置背景颜色 .btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white; } 设置背景颜色和文字颜色.png 修改圆角： .btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white; border-radius: 98rpx; } 屏幕快照 2018-07-03 18.52.02.png 效果并不好，此时增加 .btn1::after { border-radius: 98rpx; } 效果图如下：完美圆角效果

边框圆角

阅读更多关于边框圆角

边框圆角 1.什么是边框圆角? 将直角的边框变为圆角的边框 2.边框圆角的格式? border-radius: 左上右上右下左下; 3.将正方形变为圆形的技巧 border-radius: 50%; 4.系统如何绘制圆角? 首先根据指定的值找到圆心按照指定的值作为半径绘制圆弧绘制半圆1 width: 200px; 2 height: 100px; 3 border: 1px solid #000; 4 box-sizing: border-box; 5 margin: 100px auto; 6 border-radius: 100px 100px 0 0; 绘制椭圆width: 400px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 300px auto; /*绘制椭圆设置水平方向为宽度的一半, 设置垂直方向为高度的一半*/ border-top-left-radius: 200px 100px; border-top-right-radius: 200px 100px; border-bottom-left-radius: 200px 100px; border-bottom-right-radius: 200px 100px; <div class="all"> <!

用CSS画小猪佩奇，你就是下一个社会人！

阅读更多关于用CSS画小猪佩奇，你就是下一个社会人！

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 作者：江志耿 | 腾讯TEG网络工程师我是佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈妈，嚯，这是我的爸爸，嚯~ 背景小猪佩奇已经火了好一阵了，其实一开始我是不屑的。纵观小朋友的历届动画，无论喜洋洋、熊出没还是小兔兵兵、小熊维尼，火过一阵便迅速陨落，回想起来也没多少沉淀的东西。所以一开始让我看小猪佩奇的时候我是拒绝的，因为你不能让我看，我就马上去看，第一我要试一下。深入了解之后发现，卧槽，世间竟有如此出尘绝艳的动画片！正如某个浙江人说过：你不喜欢小猪佩奇那是因为你不了解。魔性的猪叫声，任性的踩泥坑。这不是一只简单的猪，从此路转粉。我在淘宝买了小猪佩奇贴纸贴上了社会人纹身、电脑桌面壁纸换上了佩奇全家福、买了小猪佩奇公仔。但真正给我工作上带来积极作用的是我偶然发掘出来的小猪佩奇调试法。小猪佩奇调试法：在程序的调试、除错或测试过程中，操作人耐心地向小猪佩奇解释每一行程序的作用，以此来激发灵感与发现矛盾。 “喜欢一个事情，而这个事情又正好能与工作结合，这是非常幸运的事情。小猪佩奇调试法给我带来了工作效率的提升，也带来了全天的好心情。” —— Cristiano Bottlejiang 很多人号称自己是社会人是佩奇粉，其实大部分都是路人粉。路人粉就是说路过认识成为了粉丝，就比如我回家看到小孩子在看小猪佩奇而知道了这个事

利用border-radius画椭圆

阅读更多关于利用border-radius画椭圆

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>画椭圆</title> <style> div{ width:200px; height:100px; background-color:#ffa500; border-radius:100px/50px; } </style> </head> <body> <div></div> </body> </html> 首先来一个宽高不同的div 然后宽高分别减半写到border-radius后面，格式如下: border-radius:100px/50px; 来源： https://www.cnblogs.com/blogsky-520/p/12513507.html

轮播图

阅读更多关于轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 ul{ 12 list-style: none; 13 overflow: hidden; 14 } 15 ul li{ 16 float: left; 17 width: 200px; 18 height: 50px; 19 border:3px solid black; 20 text-align: center; 21 line-height: 50px; 22 } 23 </style> 24 </head> 25 <body> 26 <ul> 27 <li>1</li> 28 <li>2</li> 29 <li>3</li> 30 <li>4</li> 31 <li>5</li> 32 </ul> 33 <script> 34 // 除了通过ID名获取标签,还有通过标签名获取标签 35 var lis=document.getElementsByTagName('li'); 36 for(var i=0;i<lis.length;i++){ 37 console.log(lis[i]); 38 //

css3写单选框，复选框

阅读更多关于 css3写单选框，复选框

废话不多说直接看图:复选框的选中喝未选中的，哈哈哈，截图截的不够好，请谅解。直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input[type=checkbox]{ /*同样，首先去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*编辑我们自己的样式*/ position: relative; width: 20px; height: 20px; background: transparent; border:1px solid #00BFFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: none; cursor: pointer; } input[type=checkbox]:after{ content: '\2714'; position: absolute; display: block; width: 100%; height: 100%; background: #00BFFF; color: #fff; text

Qt实现自定义滑动按钮

阅读更多关于 Qt实现自定义滑动按钮

　　今天记录下，使用Qt现有的组件，搭配来实现一个滑动按钮的效果。我看之前有人做过类似的，不过是在paintEvent事件里用画笔画的，我呢，比较懒，就使用现成的组件来实现吧，下面看下效果：　　　　这是利用自定义的类继承QWidget，里面再加一个QLabel，来实现上面的效果。顺便提一下，以后可以将自己做得组件保存下来，方便以后项目里使用。废话不多说，直接上核心代码，没玩过的，都来手动体验下吧。　　下面是头文件： #ifndef CUSTOMBUTTON_H #define CUSTOMBUTTON_H #include <QWidget> #include <QLabel> #include <QTimer> #include <QMouseEvent> #include <QStyleOption> #include <QPainter> class CustomButton : public QWidget { Q_OBJECT public: explicit CustomButton(QWidget *parent = nullptr,int width=50, int height=20); private: QLabel* myLabel; QTimer timer; int m_width; int m_height; int dir; int

【Qt学习】---- 实战|圆形按钮

阅读更多关于【Qt学习】---- 实战|圆形按钮

Qt中如何将按钮设置为圆形 MyButton . resize ( 40 , 40 ) ; //设置按钮大小，这里按钮长40，宽40 MyButton . setStyleSheet ( "border-radius:20px" ) ; //设置按钮样式表，边界半径为20 首先将 resize 内部两个参数设置一样，先变成正方形然后将 border-radius 的值设置成正方形边长的一半，编译运行后就是一个圆形按钮。按钮大小改变 resize 和 border-radius 的值即可来源： CSDN 作者：伊娃链接： https://blog.csdn.net/wyifan_/article/details/104791758

订阅 border-radius