border-radius

图标作为网页设计中的一部分，其在凸显网页重要元素特性，视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点，在项目实践时不宜将每个图标作为单个图片元素进行加载，这会增加Http请求，影响网页的性能。因此，在实际中，我们可能见到以下一些常见的解决方案： 将多个图标按照一定排列顺序合并在一个图片里（即 sprite图 ），再通过CSS设置元素的 background-position 来为元素设置背景从而展示图标 将单个图标元素转成 base64 格式，并在CSS声明背景 使用 SVG 来绘制图标 使用字体图标 使用CSS来绘制图标 ... 以上方式都可以很好的实现功能，各有各的优缺点。在移动端的某些情况下，我个人比较偏好使用CSS来实现一些简单的小图标，原因有以下几点： 适应性和定制性强，如可以随意改变颜色，大小 占用空间小 在移动端兼容性高 可以不断使自己熟悉CSS3的各个属性并得以应用 而由于CSS3的普及和在各大浏览器的不断增强支持，使CSS具有更大的可能性和能力去绘制更多样化，更复杂的图标。当然，也有不少人反对web图标使用CSS绘制的，在这里不加以讨论。如果你也反对，不妨以当乐趣的心态去看待。 本文将单独讲解如何用CSS绘制一些图标。而由于用CSS实现图标绘制，偶尔意味着你需要用更复杂的html结构去支持图标的绘制，所以本文讲解的将是

很久没更新博客了，因为比较菜，也没什么能在上面分享的。作为新手，马上要毕业找工作了，最近又在重新学习web的一些知识，刚刚学到CSS3，跟大家分享一些比较有趣的知识。今天分享的是利用CSS实现圆形头像，其实主要用的属性就是border-radius。 方法一：直接将用一个div包裹img。代码如下： CSS设置如下，其重点就是设置border-radius圆角属性为为宽高的一半，然后要在包裹<img>标签的div中设置超出隐藏这个属性，不然图片会显得太大，超出盒子。 方法二：直接将头像设置为div的背景图片，同样的利用border-radius这个属性将盒子调成圆形。代码如下： 方法三：直接操作<img>这个标签，因为img同时也是一个盒子，直接设置img标签的border-raiuds属性即可，但该方法如果图片不是正方形，容易导致图片变形。代码如下： 最后贴上以上代码的效果图（欢迎留言、私信交流）： 来源： https://www.cnblogs.com/mxlcode/p/11787654.html

流浏览器自带的滚动条样式很丑，确实有必要美化。 滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分组成： ::-webkit-scrollbar 定义了滚动条整体的样式； ::-webkit-scrollbar-thumb 滑块部分； ::-webkit-scrollbar-thumb 轨道部分； 下面以overflow-y:auto;为例（overflow-x:auto同） html代码： <div class="test test-1"> <div class="scrollbar"></div> </div> css代码： .test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none; } .scrollbar{ width: 30px; height: 300px; margin: 0 auto; } .test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb {/

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: Like this With only this code 1 回答1: http://jsfiddle.net/MafjT/ You can use this css span { display: block; height: 60px; width: 60px; line-height: 60px; -moz-border-radius: 30px; /* or 50% */ border-radius: 30px; /* or 50% */ background-color: black; color: white; text-align: center; font-size: 2em; } Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius. This solution always renders a circle, regardless of

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I got a weird behavior when working with transform in CSS3. Here is my code: *, *: before , *: after { box - sizing : border - box ; - moz - box - sizing : border - box ; - webkit - box - sizing : border - box ; } . btn_exchange a { position : relative ; text - decoration : none ; display : block ; width : 150px ; float : left ; color : #ffffff; font - size : 14px ; background : #0ea2d3; box - shadow : 0 3px 0 0 rgba ( 7 , 154 , 190 , 0.75 ); text - align : center ; font - weight : bold ; } @keyframes pulse { 0 % { transform :

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have a page that uses border-radius. It doesn't show up rounded in the native Android browser; it shows up with square corners. It shows up rounded in desktop Chrome, IE, FF, etc fine, but not in the native phone browser. Does anyone know if this is a problem with the browser itself, some additional CSS extension that I'm not using, etc? Here's my CSS (in the demo): .bigButton2 { width: 320px; height: 200px; margin: auto; padding: 20px; background-color: #521c0b; color: #FFFFFF; border: 3px solid #e3b21e; border-radius: 30px; -webkit

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website. Is there a way to instruct Safari (via CSS or metadata) not to round the input fields and render them rectangular as intended? 回答1: On iOS 5 and later, good ol' border-radius does the trick: input { border-radius: 0; } If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use the

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am working in cakephp and want to do some css style. The problem is with Internet Explorer. Currently i want to make css border-radius work properly in IE7 & IE8. The css i am using is #lastcol { float:left; width:240px; min-height:630px; background-color:#ffffff; border-radius:8px 8px 8px 8px; padding:15px 15px 15px 15px; margin-top:15px; } This is one div whose border-radius i want to make it work in IE also. For this i am using behavior : url(/PIE.htc); . I have already added the PIE.js script. The moment i add the behavior feature in

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I want to know is it possible to add some flexibility to css via this: <div class='round5'></div> where .round is a class with round corners and '5' determines the amount of radius. Is it possible? I have seen some where, but I don't know how the implementation takes place. 回答1: You can't define the border radius separate from its value because it's all one property. There's no way to tell an element to have rounded corners "in general" without also specifying how much to round them by. However, you can do something kind of similar with

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: Recently, Instagram logo has changed as you all know. I need vector logo but it is not possible, I mean gradients. Is there any css code for new logo? 回答1: Here is the css code for background color: .instagram{ width:100px; height:100px; background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366