border-radius | 易学教程

四则运算计算器的微信小程序_1 界面

阅读更多关于四则运算计算器的微信小程序_1 界面

主界面wxml文件： page{ height:100%; } .content{ min-height:100%; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; position:relative; } .main-bg{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:-1; } .screen-container{ padding-top:30rpx; padding-left:5rpx; padding-right:5rpx; } .screen{ ">#fff; border-radius:3px; text-align:right; width:720rpx; height:100rpx; line-height:100rpx; padding-left:10rpx; padding-right:10rpx; margin-bottom:30rpx; } .btnGroup{ display:flex; flex-direction:row; } .item{ width:160rpx; min-height:10rpx; margin:10rpx; text-shadow

BFC/添加省略号/圆角

阅读更多关于 BFC/添加省略号/圆角

1. 触发BFC的样式浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外的值 (hidden、auto、scroll) 2. BFC解决的问题解决子元素带动父层级的问题解决margin叠加问题解决margin传递问题解决浮动问题解决覆盖问题 3. 添加省略号 width 必须有一个固定的宽 white-space : nowrap 不让内容折行 overflow : hidden 隐藏溢出的内容 text-overflow : ellipsis 添加省略号多行(了解)： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 4. 圆角当宽高不一样的情况下？ border-radius : 100px | 50% 这是有区别的 border-radius: 20px; 四个角 border-radius: 20px 40px; 左上和右下右上和左下 border-radius: 20px 30px 40px 50px; 左上右上右下左下 (顺时针)

ios/safari滚动(transform)的时候圆角变方框(border-radius)失效问题

阅读更多关于 ios/safari滚动(transform)的时候圆角变方框(border-radius)失效问题

比如界面有跑马灯（轮播图），为了图片好看，一边都有圆角，所以边框就用border-radius: 12px; 用谷歌浏览器发现没什么问题。但是用safari，iphone的mac都一样，会出现滚动的时候圆角短时间成方块，动画完成后，会变成圆角。查了资料发现safari会在 transform的时候border-radius失效。解决方案就是外围的div加个 -webkit-transform:rotate(0deg); 比如下面的代码你们可以试试，用的是vue+vant： vant轮播图官方api: https://youzan.github.io/vant/#/zh-CN/swipe <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="item in cardImgs"> <van-image class="card-detail-card-img" :src="item" /> </van-swipe-item> </van-swipe> cardImgs:[ 'http://xxx.jpg', 'http://xxx2.jpg' ], .my-swipe{ /*加上这个搞定*/ -webkit-transform:rotate(0deg

博客园样式

阅读更多关于博客园样式

原文： https://segmentfault.com/a/1190000012956911 1. 基础介绍 1-1. 介绍一下我的博客设置我个人比较习惯用 Makedown 来编写，所以我选择的编辑器是 Makedown ，在 [ 管理 ] - [ 选项 ] 中可以设置。在 [ 管理 ] - [ 模版 ] 中有许多博客模板，可以直接使用，界面也会变好看一点。我使用的是 red_autumnal_leaves （红叶）因为我的样式定制是在红叶的模版基础上进行修改的，所以可能其他的模版会出现兼容的问题，这个可以根据自己的模版和喜好进行修改。（我已经尽量做到样式兼容了，但是模版太多，心有余而力不足啊。。。） 1-2. 简单的操作可以通过审查元素的方法，来设置自己满意的样式。操作是 F12 。 F12 操作可以打开控制面板，具体的样式可以直接在上面修改，然后把修改后的样式保存下来。保存后的样式，复制到 [ 管理 ] - [ 设置 ] - 页面定制CSS代码上面，然后 [ 保存 ] 注意：有时候修改的样式没有起作用，是因为样式的优先级的原因，这里我选择简单粗暴的 !important 来解决 2. 设置标题、子标题、导航栏 2-1. 标题和子标题标题和子标题是页面最顶部的，设置在 [ 管理 ] - [ 设置 ] - 标题，子标题 /* 博客标题和副标题 */

CSS3 Border-color

阅读更多关于 CSS3 Border-color

CSS3 中有关于 Border 的属性一共有三个：圆角border-radius ，图片边框border-image , 边框多颜色border-color ，其中圆角border-radius是常用的一个属性，而且现在很多网站制作圆角效果都使用 border-radius 来实现，具体的使用方法可以查阅本站有关于 border-radius 的介绍。今天我们主要来学习border-color的使用。 border-color这个属性我想大家一定不会陌生，因为我们平时常能看到并使用这个属性。那么在 CSS3 中这个属性又有什么不同之处呢？又将如何使用呢？今天我们就带着这两个问题开始我们 CSS3 中的border-color的学习。在 CSS2 中，我们可以把border-color同时应用到不同的边框上，也可以分别在各边上色，如： border-color: <color>/*其中可以上一个值，也可以是多个值，具体我在这里不多说了，大家来时用到的也特别多*/ /*我们可以分别给各边上色*/ border-top-color: <color>/*给上边框上色*/ border-right-color: <color> /*给右边框上色*/ border-bottom-color:<color> /*给下边框上色*/ border-left-color: <color> /

html&css 机器猫的实现

阅读更多关于 html&css 机器猫的实现

新手小白写的机器猫，效果图如下： html代码： <!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>哆啦A梦</title> <link rel= "stylesheet" href= "./css/demo.css" > </head> <body> <div class= "box" >  <header>  <div class= "face" >  <div class= "eye1" >  <div class= "eyeball" ></div> </div>  <div class= "eye2" >  <div class= "eyeball" ></div> </div>  <div class= "nose" > <div></div> </div> <

前端代码规范-CSS

阅读更多关于前端代码规范-CSS

CSS规范一.命名规范 BEM(Block Element Modifier) 1.Block name -- 实体名称中的单词之间用连字符分隔(-) HTML <div class="menu">...</div> <div class="menu-name">...</div> CSS .menu { color: red; } .menu-name { color: red; } 2.Element name ***-- 元素名与块名之间用双下划线分隔(__)*** ***-- 需要注意的是不要出现block__elem1__elem2类似的命名，因为元素总是块的一部分，而不是另一个元素的。*** HTML <div class="menu"> ... <span class="menu__item"></span> </div> CSS .menu__item { color: red; } 3.Block modifier name -- 修饰符与块或元素的名称之间用双连字符分隔(--) -- 修饰语的值与其名称之间用双连字符分隔(--) HTML <div class="menu menu--hidden"> ... </div> <div class="menu menu--theme--islands"> ... </div> CSS .menu--hidden

2020-02-28

阅读更多关于 2020-02-28

圆角样式 border-radius border-radius：左上右上右下左下; 椭圆设计：border-radius的属性值可分为两段，由一个反斜杠隔开反斜杠前面的为横轴值，反斜杠后的为纵轴值，椭圆的写法与圆角类似，反斜杠前后都是独立的，语法和简写都一样。 0px/0px 或0%/0% 来源： CSDN 作者： qq_46216610 链接： https://blog.csdn.net/qq_46216610/article/details/104554060

[翻译]jQuery Mobile入门教程——主题的使用和定制

阅读更多关于 [翻译]jQuery Mobile入门教程——主题的使用和定制

原作： Using and customizing jQuery Mobile themes —— Matthew David 翻译： filod 转载声明：请注明原作者、翻译者以及译文链接。在之前的文章 jQuery Mobile 入门教程里，我对jQueryMobile的使用进行了入门介绍，你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。然而仅仅是这样的话，你的需求肯定不会被满足的——你或许需要给header换个颜色来配合自己公司的logo？又或者需要突出显示一下某个静音按钮？总而言之，你需要自己控制jQueryMobile的显示效果。本文旨在介绍教大家如何在jQueryMobile构建的站点中控制主题显示的效果。 jQueryMobile的主题（theme）和调板（swatches）很显然，jQueryMobile是用CSS来控制在屏幕中的显示效果的，而在CSS文档中又包含两个主要的部分：结构：用于控制元素（如按钮、tab等）的在屏幕中显示的位置，内外边距等。主题：用于控制可视元素的视觉效果，例如字体、颜色、渐变、阴影、圆角等。你可以通过修改主题来控制可视元素（如按钮）的效果。注意：为了尽量减少图片的使用（目的是减少请求数），jQueryMobile使用了css3的方式来替代传统的图片方式创建按钮等控件。当然用图片来设计也可以

css修改整个项目的滚动条样式

阅读更多关于 css修改整个项目的滚动条样式

在项目中，滚动条不可避免的要出现。设置统一规范的滚动条也是必然。用一个独立的css文件即可修改整个项目中的滚动条样式。 scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-webkit-scrollbar-track-piece { background-color: #00000000; border-radius: 0; } /* 整个滚动条 */ ::-webkit-scrollbar { width: 8px; } /* 滚动条竖向滑块 */ ::-webkit-scrollbar-thumb:vertical { background-color: rgba(255, 255, 255, .1); border-radius: 2px; } /* 滚动条竖向滑块hover */ ::-webkit-scrollbar-thumb:vertical:hover { background-color: rgba(255, 255, 255, .2); border-radius: 4px; } /* 滚动条横向滑块 */ ::-webkit-scrollbar-thumb:horizontal { background-color: rgba(255, 255, 255, .1); border-radius: 2px; } /*

订阅 border-radius