1 2 3 4 5 6 7 :root,body{ 8 height: 100%; 9 width: 100%; 10 } 11 .z{ 12 width:200px; 13 height: 400px; 14 left: 400px; 15 position: absolute; 16 } 17 .z div{ 18 position: absolute; 19 20 } 21 .z .red{ 22 ...
早上在w3ctech上看到 中国第二届CSS Conf总结 的时候，真是开心极了； 自从去年在慕课网上看了第一届CSS conf 视频之后，整个人都震惊了，原来还有大会是专门用来讨论CSS的，而且分享的CSS知识真是让人眼界大开； 我在博客园写的第一篇博文《布局神器Flexbox》便是受到第一届CSS Conf的启发; 所以，算是结下了不解之缘；如今看到第二届分享的视频和PPT时，虽然才看到 《重拾 css 的乐趣（上）》 这一部分内容,但却很受启...
最近完成了公司安排的移动web触屏开发，期间涉及到在移动设备上显示线条，最开始采用PC常用的css board属性来显示1个像素的线条，但是发现在移动设备上并不美观，参考淘宝、京东的触屏发现它们均是采用浅细的线条来显示在移动设备上。 以下纪录了比较方便的4种绘制0.5像素线条方式 一、采用meta viewport的方式，这个也是淘宝触屏采用的方式 常用的移动html viewport的设置如下 具体意思就不多提...
巧用css的border-radius属性，也能绘制出好看的图形 html部分 用css创建图形 css部分 div{ margin: 8px;}.rectangle{ width: 250px; height: 150px; background: #6DC75F;;}/*三角形*/.sanjia{ border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid #6DC75F; width: 0; height: 0;}/*椭圆*/.tuoyuan{ width: 300px; height: 150px; background: #...
css3实现的绘制图形图案效果代码实例:如果使用css2实现绘制图形图案几乎是不可能的，或者说费好大的劲也只能够得到非常简单的图案，css3的出现将绘制复杂的图形这个目标成为可能，下面就是一个相关的代码实例，有这方面需要的朋友可以参考一下它的实现方式。代码如下: 蚂蚁部落div{ width:170px; height:140px; background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) ...
一个简单的SVG绘制图片的小案例。 效果图: 代码如下: 1 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 body { 8 background-color: #d5d3d4; 9 }10 11 .container {12 width: 500px;13 height: 500px;14 position: relative;15 top: 80px;16 left: 50%;17 ...
今天分享“svg绘制圆形”部分 1、简单圆形 效果图如下： 关键代码： 代码解析： cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)； r属性定义圆的半径 2、圆形填充颜色及边框 效果图如下： 关键代码： 代码解析： fill 属性定义圆形的填充颜色（rgb 值、颜色名或者十六进制值）； stroke-width...
基本图形包括：矩形、圆角矩形、圆形、椭圆形、三角形、值线、弧 这些图形的绘制用到了CSS圆角属性，不考虑IE8。 下面的实现在chrome浏览器运行通过。 1.矩形 比较简单，通过CSS设置宽度、高度、背景色即可。 html: css: .rectangle { width: 150px; height: 100px; background-color: orangered; } 呈现： ...
在这篇教程中，你将会学习如何在Adobe Illustrator中创建4种甜甜圈，包括巧克力、草莓、糖衣巧克力颗粒和纯糖甜甜圈，教程主要帮你掌握散点笔刷和钢笔工具的运用，一起来试试。 最终效果： 1. 启动一个新项目 启动Illustrator 并转到文件>新建用于打开一个新的空白的文档。 输入你的文件名，设置尺寸，然后选择像素作为单位，RGB作为色彩模式。 接下来，转到编辑>首选项>常规并设置键盘增量为1px，转到单位和显示...
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法 代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;} 代码如下...
异步绘制 UIKit的单线程天性意味着寄宿图通畅要在主线程上更新，这意味着绘制会打断用户交互，甚至让整个app看起来处于无响应状态。我们对此无能为力，但是如果能避免用户等待绘制完成就好多了。 针对这个问题，有一些方法可以用到：一些情况下，我们可以推测性地提前在另外一个线程上绘制内容，然后将由此绘出的图片直接设置为图层的内容。这实现起来可能不是很方便，但是在特定情况下是可行的。Core Animation提供了一些选择：...
随着网络的发展，CSS 也在不断的完善，充分吸取多年来 Web 发展的需求，提出了很多新颖的 CSS 特性，例如很受欢迎的圆角矩形 border-radius 属性，但很可惜，此属性目前没有得到任何浏览器的支持。 对于一些浏览器，它们有其私有的圆角属性。如 FF 的 -moz-border-radius ，Safari 和 Chrome 的 -webkit-border-radius 。效果见下图： FF 的圆角Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核，这里就只附 Chro...
Clippy 是一个 CSS clip-atch 属性绘制工具，使用它可以轻松绘制不同的几可形状的。 clip-path 是 CSS 中的一个裁剪属性，用于裁剪元素，通过此属性可以实现类似PS蒙版一样效果。若使用 clip-path 制作多边形的裁切图案，需要计算坐标位置，如： .element { clip-path: polygon(x1 y1, x2 y2, x3 y3, …); } 从代码可以看出，计算这个坐标是相当麻烦的，所以使用 Clippy 就解决这个问题。 网站名称：Cl...
源代码： v0 v1 v2 v3 v4 v5 v6 3 1 2 1 1 1 1 生成样式： 希望去掉表格右端的长空格，求问各位高手有什么好的方法。新手，请多多包涵，谢谢！ 回复讨论(解决方案) 可以使用bootstrapt嘛 bootstrap可以的，谢谢了~
利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是右边框。#triang...