transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
最终的展示效果如下 , body 中的文本 , 内外边距清除后 , 紧贴浏览器左上角 ;
我爱水煮鱼博客上使用的图片比较多，虽然我采用了服务器缓存，gzip 压缩以及对 CSS 和图片文件设置了一个比较合理的过期时间，但是还是比较慢。所以减少图片的使用还是速度加快的王道，所以我今天学习了下使用 CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari 也通过私有属性实现了该功能：
CSS3是Cascading Style Sheets的第三个版本，是一种用于描述文档样式的语言（CSS3是CSS（层叠样式表）技术的升级版本）。它是前端开发中用于控制网页布局和样式的技术之一。CSS3引入了许多新的特性和功能，如圆角、阴影、渐变、动画等，大大增强了网页设计和交互的能力。与CSS2相比，CSS3提供了更多的选择和灵活性，使开发人员可以以更精细的方式控制网页的外观和表现。
CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。
HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。
层叠样式表。(Cascading Style Sheets) CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
将布局中的 三个 链接图片 , 放置在 单独的 标签中 , 每个 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ;02【CSS】骨架屏 Skeleton 效果现在很多网站在加载数据的时候，为了避免页面过于空白，都会用这种方式预告将会有内容载入，从而提升用户体验：04制作CSS气泡框这种方法的优点是所有浏览器都支持，缺点是比较麻烦，必须制作专门的图片，增加多余的标签，代码的灵活性较小。02《精通CSS》第5章 漂亮的盒子前面我们了解过了盒模型，知道盒子由外边距、边框、内边距和内容区组成。对于整个盒子，我们可以通过一系列的手段来美化，如指定盒子的背景、边框以及盒子的阴影。02css圆角边框怎么设置颜色_word图片怎么设置圆角大小css+div是页面设计的法宝，通过css+div能够设计出各种效果！本文给大家简单介绍下css圆角边框怎么设置，大家可以参考，也可以直接拿过去使用，当然要修改下具体的参数。02从React-Native坑中爬出，我记下了这些最近因为业务需要，做了一些关于React-Native方面的开发，对一些自己遇到的问题做了记录。总共 21 条要点记录，承接于上一篇文章03巧妙实现带圆角的渐变边框border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。03《CSS揭秘》读书总结：背景与边框假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：04基本的导航条的制作一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。02WordPress美化-缩略图&整站添加圆角、边框、阴影我觉得自己的审美是在一直在变化的，总是感觉还会有更好的效果。那就要不断的更改尝试。01为 IE7、IE8 增加圆角支持的 jQuery 插件：jQuery Corner圆角在网页设计中比较常见，但是却让前端很苦恼。在过去的时候，做一个圆角效果往往需要将圆角图片切出，然后通过背景等实现效果。而在现在，CSS3 中有一个 border-radius 属性即可生成各种尺寸的圆角，十分强大，于是大家都开始使用 border-radius 的方式做圆角。01css3 Border属性css3中关于Border的属性一共有三个：圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性。02【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;01玩转 CSS Border-Image读到书中介绍border-radius的内容时，提到了传说中的九宫格技术，其相关介绍只有可怜的不到一页。九宫格技术所使用的 CSS 属性就是我们今天的主角border-image。虽然这一技术确如书中所说，很少被使用了。但是歪马突然想起自己曾经为了实现某个效果折腾了很久，而这刚好适合用border-image来实现。02带圆角的虚线边框？CSS 不在话下今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：01IT课程 CSS基础 023_图片、背景图片是网页中非常重要的媒体类型，恰到好处的使用图片可以使网页多彩生动，不再局限冷冰冰的文字。01HTML5简明教程（三）使用CSS3HTML是骨架，CSS是装饰，CSS使得网页丰富多彩，它也是Web开发不可或缺的一部分。01【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;03CSS3圆角 border-radiusHTML5学堂：圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中，如果需要实现圆角效果，可以使用背景图的实现，但是这样会造成背景图大小和数量的增加，从而使得服务器请求次数和需要加载的代码量增加，降低加载速度。 CSS3圆角的优势： CSS3提供了更简便快捷的属性border-radius之后，实现边框圆角就非常的简单了，而且多了很多个优点，一方面减少了图片的HTTP的请求，一方面提高了网站的性能。还有一方面就是减少代码，提高了维护性。既然CSS3圆角提供了那么多的好处，我们看看CSS3的bor07不再切图！CSS实现渐变提示框（tooltips）今天来看一种十分常见的交互：提示框（tooltips）。通常提示框都是纯色的，比如下面这个01前端网页制作秘密武器之盒模型边框盒模型是CSS的一种基础设计模式，定义了Web页面中的元素是如何被看作盒子来解析的，而每一个盒子又有不同的展示方法接下来我们将详细的介绍一下边框的高级属性：圆角边框、图像边框。01第93天：CSS3 中边框详解其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。04CSS3 Border属性介绍通过边框属性，我们可以实现一些类似按钮或者背景图片的替代效果。因为大量的图片素材对网页的加载速度影响也很大，但是由于现在的浏览器对css3的兼容与支持各有不同，所以现在要用css替代 配合图片达到的效果还是不太现实。03CSS3边框1、border-radius 圆角是做网页永远绕不过的话题，以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。 border-radius: 5px; 对于正方形border-radius设置为边长的一半，就变成圆了。 width: 100px; height: 100px; border-radius: 50px; border-radius是缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，05CSS——边框定义 边框(Border）属性是对HTML元素的边框进行定义的CSS属性。 概述 通过边框的样式设置，给元素增加更丰富的外观 边框的设置包含以下内容: 边框的类型 边框的尺寸 边框的前景背景 圆角边框 列表 元素 描述 border border 属性是规定各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 border-bottom border-bottom 该属性是用来将下边框的所有属性：border-bott02CSS3自定义滚动条样式 -webkit-scrollbar webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。02盒子模型（CSS重点）其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。01【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;02微信小程序button组件样式需要使用微信小程序button组件的open-type来实现授权之类的操作时，发现样式并不是自己想要的，然后改起来也并不是很方便，下面让我们一起看一下：05Bootstrap响应式前端框架笔记六——图片与其他辅助类 在页面中插入图片，Bootstrap框架中定义了3中图片的Css类样式，分别为圆角图片img-rounded类，圆形图片img-circle类和带边框的图片img-thumbnail类，示例如下：02Css3新特性总结之边框与背景（一）本系列主要总结Css3一些新特性的认识，来源于《css揭秘》书。 一、半透明边框 css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1) background-clip：裁剪背景颜色，默认为border-box(背景颜色扩散到border）；padding-box（背景颜色扩散到padding）；content-box（背景颜色扩展到content) 示例代码： width:200px; height:2008利用PHP实现404页自动更换图片 附api只拿来做404页背景图或许有点太单调了，实际上也可以用来写广告位banner随机图片，单个图标ico随机（效果会太花里胡哨）。甚至文章缩略图也能指定图片随机显示。等等等等...只要是能插图片的地方，都可以用随机图片API。01CSS快速入门（三）在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。02最全HTML与CSS基础总结，不进来看看吗？网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等02哪些你知道或不知道的css，在这里或许都齐全 css编码技巧 css小技巧暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：01【移动端网页布局】流式布局案例 ⑥ ( 多排按钮导航栏 | 设置浮动及宽度 | 设置图片样式 | 设置文本 )该导航栏的宽度自动充满整个屏幕 , 宽度为 100% , 高度也不需要设置 , 设置自适应即可 ;04Cocos——UI多端适配之道前端同学通常都用媒体查询或 rem 做多端适配，但是在 Cocos 上 CSS 不复存在。那你知道在 Cocos 上如何做到多端适配吗？本文从需求背景出发，带你领略Cocos的多端适配之道～ 背景 某一天接到了新需求，自己看了设计同学给的设计稿后瞬间感觉头大，分析了下主要有以下难点： 题目背景需为同一张背景图，在不同端上要显示背景图的不同区域 标题栏上的倒计时、题干与最小化按钮的贴边距离在各端各不相同 选项背景图需根据选项长度自动拉伸，同时保证两侧圆角不被拉伸 如果这种适配方案采用CSS实现的话，肯定03哪些你知道或不知道的css，在这里或许都齐全暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：0201-移动端开发教程-CSS3新特性（上）根据文章内容总结撰写摘要，以json格式返回。00css3有哪些新增属性？(回顾)这里说一下题外话，需要注意：”border-width” 属性如果单独使用的话是不会起作用的。请首先使用 “border-style” 属性来设置边框。0201-移动端开发教程-CSS3新特性1. 移动端开发课程概述 移动互联网的兴起，让移动端的开发迅速蹿红。对于前端开发者来说，移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。 这边课程内容包07分享7款超赞的CSS3动画效果，值得你收藏！今天与大家分享7款顶级的CSS3动画效果，包含了菜单特效、文字特效、图片特效等，另外还有几个表现非常特别的动画，个人觉得非常赞哦。03CSS3 黑科技 - 内凹圆角 - 径向渐变实现可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。01
现在很多网站在加载数据的时候，为了避免页面过于空白，都会用这种方式预告将会有内容载入，从而提升用户体验：
这种方法的优点是所有浏览器都支持，缺点是比较麻烦，必须制作专门的图片，增加多余的标签，代码的灵活性较小。
前面我们了解过了盒模型，知道盒子由外边距、边框、内边距和内容区组成。对于整个盒子，我们可以通过一系列的手段来美化，如指定盒子的背景、边框以及盒子的阴影。
css+div是页面设计的法宝，通过css+div能够设计出各种效果！本文给大家简单介绍下css圆角边框怎么设置，大家可以参考，也可以直接拿过去使用，当然要修改下具体的参数。
最近因为业务需要，做了一些关于React-Native方面的开发，对一些自己遇到的问题做了记录。总共 21 条要点记录，承接于上一篇文章
border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。
假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：
一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。
我觉得自己的审美是在一直在变化的，总是感觉还会有更好的效果。那就要不断的更改尝试。
圆角在网页设计中比较常见，但是却让前端很苦恼。在过去的时候，做一个圆角效果往往需要将圆角图片切出，然后通过背景等实现效果。而在现在，CSS3 中有一个 border-radius 属性即可生成各种尺寸的圆角，十分强大，于是大家都开始使用 border-radius 的方式做圆角。
css3中关于Border的属性一共有三个：圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性。
HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ;
读到书中介绍border-radius的内容时，提到了传说中的九宫格技术，其相关介绍只有可怜的不到一页。九宫格技术所使用的 CSS 属性就是我们今天的主角border-image。虽然这一技术确如书中所说，很少被使用了。但是歪马突然想起自己曾经为了实现某个效果折腾了很久，而这刚好适合用border-image来实现。
今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：
图片是网页中非常重要的媒体类型，恰到好处的使用图片可以使网页多彩生动，不再局限冷冰冰的文字。
HTML是骨架，CSS是装饰，CSS使得网页丰富多彩，它也是Web开发不可或缺的一部分。
在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;
HTML5学堂：圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中，如果需要实现圆角效果，可以使用背景图的实现，但是这样会造成背景图大小和数量的增加，从而使得服务器请求次数和需要加载的代码量增加，降低加载速度。 CSS3圆角的优势： CSS3提供了更简便快捷的属性border-radius之后，实现边框圆角就非常的简单了，而且多了很多个优点，一方面减少了图片的HTTP的请求，一方面提高了网站的性能。还有一方面就是减少代码，提高了维护性。既然CSS3圆角提供了那么多的好处，我们看看CSS3的bor
今天来看一种十分常见的交互：提示框（tooltips）。通常提示框都是纯色的，比如下面这个
盒模型是CSS的一种基础设计模式，定义了Web页面中的元素是如何被看作盒子来解析的，而每一个盒子又有不同的展示方法接下来我们将详细的介绍一下边框的高级属性：圆角边框、图像边框。
其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。
通过边框属性，我们可以实现一些类似按钮或者背景图片的替代效果。因为大量的图片素材对网页的加载速度影响也很大，但是由于现在的浏览器对css3的兼容与支持各有不同，所以现在要用css替代 配合图片达到的效果还是不太现实。
1、border-radius 圆角是做网页永远绕不过的话题，以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。 border-radius: 5px; 对于正方形border-radius设置为边长的一半，就变成圆了。 width: 100px; height: 100px; border-radius: 50px; border-radius是缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，
定义 边框(Border）属性是对HTML元素的边框进行定义的CSS属性。 概述 通过边框的样式设置，给元素增加更丰富的外观 边框的设置包含以下内容: 边框的类型 边框的尺寸 边框的前景背景 圆角边框 列表 元素 描述 border border 属性是规定各种单独的边界属性的简写属性，可用于设置一个或多个以下属性的值：border-width，border-style，border-color。 border-bottom border-bottom 该属性是用来将下边框的所有属性：border-bott
webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;
需要使用微信小程序button组件的open-type来实现授权之类的操作时，发现样式并不是自己想要的，然后改起来也并不是很方便，下面让我们一起看一下：
在页面中插入图片，Bootstrap框架中定义了3中图片的Css类样式，分别为圆角图片img-rounded类，圆形图片img-circle类和带边框的图片img-thumbnail类，示例如下：
本系列主要总结Css3一些新特性的认识，来源于《css揭秘》书。 一、半透明边框 css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1) background-clip：裁剪背景颜色，默认为border-box(背景颜色扩散到border）；padding-box（背景颜色扩散到padding）；content-box（背景颜色扩展到content) 示例代码： width:200px; height:20
只拿来做404页背景图或许有点太单调了，实际上也可以用来写广告位banner随机图片，单个图标ico随机（效果会太花里胡哨）。甚至文章缩略图也能指定图片随机显示。等等等等...只要是能插图片的地方，都可以用随机图片API。
在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等
暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：
该导航栏的宽度自动充满整个屏幕 , 宽度为 100% , 高度也不需要设置 , 设置自适应即可 ;
前端同学通常都用媒体查询或 rem 做多端适配，但是在 Cocos 上 CSS 不复存在。那你知道在 Cocos 上如何做到多端适配吗？本文从需求背景出发，带你领略Cocos的多端适配之道～ 背景 某一天接到了新需求，自己看了设计同学给的设计稿后瞬间感觉头大，分析了下主要有以下难点： 题目背景需为同一张背景图，在不同端上要显示背景图的不同区域 标题栏上的倒计时、题干与最小化按钮的贴边距离在各端各不相同 选项背景图需根据选项长度自动拉伸，同时保证两侧圆角不被拉伸 如果这种适配方案采用CSS实现的话，肯定
根据文章内容总结撰写摘要，以json格式返回。
这里说一下题外话，需要注意：”border-width” 属性如果单独使用的话是不会起作用的。请首先使用 “border-style” 属性来设置边框。
1. 移动端开发课程概述 移动互联网的兴起，让移动端的开发迅速蹿红。对于前端开发者来说，移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。 这边课程内容包
今天与大家分享7款顶级的CSS3动画效果，包含了菜单特效、文字特效、图片特效等，另外还有几个表现非常特别的动画，个人觉得非常赞哦。
可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
