border-radius | 易学教程

纯CSS 常见3D实例

阅读更多关于纯CSS 常见3D实例

一、正方体我认为正方体可以算是3D图像的基础吧，首先正方体是由六个相同的面所组成，其次就需要我们依次构造。（据体构造在代码中）成平图如下: 代码如下： <!DOCTYPE html> <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>正方体</title> <style> .d3{ height: 300px; width:300px; perspective: 800px; margin:140px auto; border:1px solid #ccc; } .stage{ height: 300px; width: 300px; transform-style: preserve-3d; position: relative; transform: rotateX(45deg) rotateY(45deg); } .role{ height: 300px; width: 300px; position: absolute; } .stage{ animation:

基于jQuery封装的分页组件（可自定义设置）

阅读更多关于基于jQuery封装的分页组件（可自定义设置）

jQuery封装的分页组件前几天做了一个vue的组件分页，而现在需求是jquery的分页，我就根据我自己的需求写了一个。在网上找了很久的基于jquery的分页封装，可是都不是我想要的结果，那么今天我就给大家看一下我的这个分页。你可以自行改变内容代码来达到你的目的，例如：样式的问题，你就可以自行调整css样式。 1.看一下效果 2.下面就是具体介绍一下（1）、首先是css样式（可自行调节）当然你页可以外链一个css，最后会有整体的代码展示！ body, html { width: 100%; height: 100%; } * { margin: 0; padding: 0; } .page { width: 100%; margin: 100px auto; height: 34px; display: flex; justify-content: center; align-items: center; } .pages { /*width: 80%;*/ display: block; height: 34px; position: relative; text-align: center; overflow: hidden; } .all_data { color: #6699FF; } .all_pages { color: #6699FF; } .page

博客入门--自定义博客主题

阅读更多关于博客入门--自定义博客主题

　　对于以往博客网站已提出较多主题供用户使用，但对于海量用户而言其主题难免过于单一。　　为突出博客主题个性化显示，目前已有第三方开源库（https://github.com/BNDong/Cnblogs-Theme-SimpleMemory）供大家使用。本文以博客园为例，实现自定义主题设置。进入博客园设置页面下载第三方库。本文重要使用资源包中的.\src\style\base.min.css的样式资源（https://github.com/BNDong/Cnblogs-Theme-SimpleMemory）。其中包含详细的说明文档，供大家参考（ https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/Customization/config ）。设置博客皮肤为SimpleMemory。　　页面定制css代码，并禁用模板默认css样式。　　 #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

Hexo之Next主题美化代码

阅读更多关于 Hexo之Next主题美化代码

我分别美化了几个不同版本的Next主题，这里把美化代码公布出来，第一种Next版本小于7.3可使用，美化效果如下。直接修改 \themes\next\source\css\_custom 将以下美化过程复制到 custom.styl 目录即可。 // ************************************************************************************************ // 全局布局美化代码 (包括,主页背景颜色,主页透明度等全局配置) // By: lyshark www.blib.cn lyshark.cnblogs.com // ************************************************************************************************ // 添加主页背景图片与背景颜色 /*body { // background:url(https://source.unsplash.com/random/1600x900); background:url(/images/background.jpg); background-repeat: no-repeat; background-attachment:fixed;

博客园页面定制 CSS 代码

阅读更多关于博客园页面定制 CSS 代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page title</title> </head> <body> </body> </html> #EntryTag { margin-top: 20px; font-size: 9pt; color: #808080 } .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% } body { color: #999; background-color: #21252b; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } table { border-collapse: collapse; border-spacing: 0

如何取消改变样式后的输入框自带的边框色

阅读更多关于如何取消改变样式后的输入框自带的边框色

我们在用html用input标签写输入框的时候，在页面呈现的是一个有线条的四边形边框。因为在很多页面中，为了增加输入框的美感性，常常我们会使用css对边框的样式进行更改，比如将四边形边框改变为圆角边框。我们常常会采用border-radius来给边框定义弧度值来改变边框样式。 border-radius：值1；表示四条边取同样的弧度值。 border-radius：值1 值2；第1个值是左上和右下、第2个值是左下和右上。 border-radius：值1 值2 值3；第1个值是左上、第2个值是左下和右上、第3个值是右下。 border-radius：值1 值2 值3 值4；第1个值是左上、第2个值是右上、第3个值是右下、第4个值是左下。在设置完成输入框后，我们在页面点击输入框时，会发现除了有圆角边框外，原有的四边形边框也会显示出来。该情况其实是显示的边框的自带颜色。这种情况的出现会大大降低用户体验。因此，查询资料发现只需要一句代码就能够实现取消。我们在css中添加样式的时候，对input添加outline:none即可。该条代码能够取消输入框自带的颜色，在我们重新点击后，不会再次出现上述情况。如果有需要取消边框的，可以添加outline:0px；。同时我们也可以给input设定宽高来改变边框的大小。来源： https://www.cnblogs.com/wangyao

electron仿制qq(2) 主界面制作

阅读更多关于 electron仿制qq(2) 主界面制作

制作从头开始最后会将写好的组件放到一起的! 之前写了好几天的纯css 有点累本章中将使用 sass 如果代码太长会分两个或多个章节写代码中会有详细的注释以便于大家阅读and理解界面可能会有部分偏差比较是仿制的官方界面尺寸默认宽度: 280px (大约我之前拉伸过被记录了所以没法准确的测量) 默认高度: 652px (也是大约值) 最小高度: 528px 最小宽度: 280px 最大高度: 1041px (可能不太准确有可能是根据分辨率来显示的) 最大宽度: 605px 顶部头像区域高度: 140px 底部选项区域高度: 40px 搜索框高度: 30px 头像直径/高度: 50px 右键菜单宽度: 180px 下载安装安装electron-vue 这几天不知道什么情况老是下载很慢如果太慢就挂代理吧! #cd F:\electron vue init simulatedgreg/electron-vue qq_main cd qq_main npm install npm run dev 开始制作创建路由和界面路由: export default new Router({ routes: [ {path: '/', name: 'main', component: () => import('@/components/LandingPage')},

一些影视作品

阅读更多关于一些影视作品

一些影视作品 - 博客园 ``` ``` */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ 一些影视作品 ``` ``` ``` .item-rows { display: flex; flex-wrap: wrap; align-items: center; margin: auto; } .item { background-color: #FFF; border-radius: 4px; border: 1px solid #ddd; width: 260px; /*height: auto;*/ padding: 0px; margin: 10px; } .item:hover { border-color: rgba(82, 168, 236, .8); outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6); } .item p { /*margin-bottom: 0!important;*/ line-height: 32px; text-overflow: ellipsis !important; overflow:

分享下我的博客园美化的模板代码

阅读更多关于分享下我的博客园美化的模板代码

模板美化教程这个代码是在网上找的一套，然后稍加修改，还添加了一点我喜爱的小物件儿。如果你喜欢这套模板就拿走吧，别忘了点个赞哦！主页文章页设置步骤： 1.更改博客皮肤 2.页面定制css代码： #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

安卓手机对于消息中心右上角提示小红点的兼容处理

阅读更多关于安卓手机对于消息中心右上角提示小红点的兼容处理

项目背景：要实现如图一样的消息提示问题：由于项目中使用了postcss-pxtorem的插件，所以导致一些正常的css在安卓机上不是圆的，border-radius写的是px,但是会自动转成rem,从而变成小数，安卓机解析偏差就变形了。解决方案：先放大再缩小 1 .unread-info { 2 background-color: #f56c6c; 3 border-radius: 30px; 4 color: #fff; 5 display: inline-block; 6 font-size: 36px; 7 height: 52px; 8 line-height: 52px; 9 padding: 0 16px; 10 min-width: 52px; 11 text-align: center; 12 white-space: nowrap; 13 position: absolute; 14 transform: translateY(-50%) translateX(100%) scale(0.25); 15 transform-origin:center left;/*由于小圆点的伸缩方向需要是右边，所以这样改，center的话会像两边扩展，位置就会跑偏*/ 16 top: 6px;/*这是对于父元素的定位*/ 17 right: 40px; 18 } 19

订阅 border-radius