border-radius | 易学教程

更改网页内滚动条效果

阅读更多关于更改网页内滚动条效果

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 9px; height: 9px } /*定义滚动条轨道*/ ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } /*定义滑块内阴影+圆角*/ ::-webkit-scrollbar-thumb { background-color: #0093ff; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } 本站点应用的滚动条样式即为上述描写

css--->圆角设置

阅读更多关于 css--->圆角设置

1.为元素添加四个相同的圆角：语法结构：border-radius：r；　　　　　r为圆角的半径大小 eg:如下样式，给元素添加四个圆角为10px 　　代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-radius: 10px; } </style> </head> <body> <div></div> </body> </html> 2.为元素创建一个圆角　　语法结构：　　　　左上角：border-top-left-radius: r ；　　　　右上角：border-top-right-radius: r ；　　　　左下角：border-bottom-left-radius: r ；　　　　右下角：border-bottom-right-radius: r ； eg:如下样式，给元素添加左上角圆角为30px 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width:

web前端入门到实战：前端高手在CSS 开发效率的必备片段

阅读更多关于 web前端入门到实战：前端高手在CSS 开发效率的必备片段

这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个<div></div>；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上 clearfix 类即可。 // 清除浮动 .clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom: 1; } 垂直水平居中在 css 的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式绝对定位方式且已知宽高专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧

蚂蚁庄园

阅读更多关于蚂蚁庄园

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>chick</title> <style> html{min-width:320px;overflow-x:hidden} body,html{height:100%;line-height:1;-webkit-user-select:none;//禁止用户复制页面文本 -webkit-touch-callout:none;-webkit-overflow-scrolling:touch;//ios滚动效果 -webkit-font-smoothing:antialiased;//mac下字体 -webkit-tap-highlight-color:rgba(242,137,76,.05);://a标签点击高亮效果} article,aside,blockquote

IE兼容css3圆角的方法

阅读更多关于 IE兼容css3圆角的方法

以前做网页圆角一般是用圆角图片，但未免过于复杂，现在css3的border-radius属性可以很方便的实现圆角功能，对网站前台人员无疑是一件喜事，但悲剧的是IE6/7/8并不支持，让我们弃新技术不用，是不可能的，因此找到了一种解决的办法--- IE利用VML矢量可标记语言作为画笔绘出圆角：下载一个压缩包ie-css3.htc，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的HTML文件，.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。使用演示： .main{ border: 2px solid #C0C0C0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position:relative; z-index:100; behavior: url(此处为ie-css3.htc文件的绝对路径); } Webkit内核的浏览器支持“ -webkit-border

IE兼容css3圆角的htc解决方法

阅读更多关于 IE兼容css3圆角的htc解决方法

IE兼容css教程3圆角的htc解决方法现在css3的border-radius属性可以很方便的实现圆角功能，对网站前台人员无疑是一件喜事，但悲剧的是IE6/7/8并不支持，让我们弃新技术不用，是不可能的，因此找到了一种解决的办法--- IE利用VML矢量可标记语言作为画笔绘出圆角：下载一个压缩包ie-css3.htc，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的 HTML文件，.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。下载地址： ie-css3.htc .main{ border: 2px solid #C0C0C0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position:relative; z-index:100; behavior: url(此处为ie-css3.htc文件的绝对路径); } Webkit内核的浏览器支持“

IE兼容CSS3圆角border-radius，box-shadow，text-shadow的方法

阅读更多关于 IE兼容CSS3圆角border-radius，box-shadow，text-shadow的方法

1.CSS box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */ } 2.问题：一、只能同时4角圆角，不能单独设置；二、div上可以正常使用，测试text文本框，会出现异常；三、CSS文件要和页面在同一目录下，否则无效四、当前元素一定要有定位属性，像是position:relative或是position:absolute属性。五、z-index值一定要比周围元素的要高，否则……只能说抱歉了~~ 3.支持的样式及状态说明参见下表：样式生效

ie8及其以下版本兼容性问题之圆角

阅读更多关于 ie8及其以下版本兼容性问题之圆角

解决办法：在http://css3pie.com/页面下载一个PIE.htc的文件，加载到根目录下，然后在css中加上一句behavior:url(../js/PIE.htc);如下： .border_radius { border:1px solid #000; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; behavior:url(../js/PIE.htc); } 其中文件的路径是相对html的，所以在服务器上最好用绝对路径。对于有些父元素已经设置了position属性的元素，会出现无法显示的情况，此时可以给元素加上position:relative；如下： .border_radius { border:1px solid #000; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; position:relative; behavior:url(../js/PIE.htc); } 也可以将元素的z-index值设大一些。如果元素不能显示，可以考虑给其父级元素设置定位属性。参考链接：使用CSS3 PIE让IE6-8正确的显示圆角 PIE使IE支持CSS3圆角盒阴影与渐变渲染

[PYQT]QSS使用，附自己的模板（算是扒OSX UI）

阅读更多关于 [PYQT]QSS使用，附自己的模板（算是扒OSX UI）

题记最近在做Python GUI开发，一直觉得自己的界面LOW爆了，所以想找一些好的资源，但真心没有太好的，最终只找到一个QSS编辑器，一个API，一个OSX的Sketch资源文件。就有了这个QSS文件，本人没有UI经验，调整了一套，算是对自己一个交待吧。一个QSS编辑器： https://github.com/hustlei/QssStylesheetEditor QssStylesheetEditor 支持预览，控件很全。一个API： https://doc.qt.io/qt-5/stylesheet-examples.html 官方例子。能用的都有了。源文件的位置在码云： https://gitee.com/aocshallo/mac-qss.git 1 QWidget{ 2 color: #222; 3 background-color: #C8F5F5F5; 4 } 5 6 QFrame, QLabel, QToolTip { 7 border: 1px solid #8D8D91; 8 border-radius: 5px; 9 padding: 1px; 10 background:#FFFFFF; 11 } 12 QLabel { 13 border: 0px solid #8D8D91; 14 padding: 2px; 15 background

Web前端一种动态样式语言-- Less

阅读更多关于 Web前端一种动态样式语言-- Less

变量变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } 混合混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。 // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } /* 生成的 CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer {

订阅 border-radius