Webkit 实战

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

div {

    border-width: 20px;

    width: 400px;

    height: 200px;

    margin: 20px;

    -webkit-border-image: -webkit-gradient(linear,left top,left bottom,from(#00abeb),to(#fff),color-stop(0.5,#fff),#66cc00)) 20;

}

</style>

</head>

 

<body>

<div></div>

</body>

</html>

 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

div {

    border-width: 20px;

    width: 400px;

    height: 200px;

    margin: 20px;

    -webkit-border-image: -webkit-gradient(linear,#66cc00)) 20;

}

</style>

</head>

 

<body>

<div></div>

</body>

</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

.div1 {

    width:400px;

    height:200px;

    border:10pxsolid #A7D30C;

    background: -webkit-gradient(linear,#66cc00));

    float:left;

}

.div1::before {

    width:400px;

    height:200px;

    border:10pxsolid #019F62;

    content: -webkit-gradient(radial,200 100,10,100,from(#A7D30C),to(rgba(1,159,98,0)),color-stop(90%,#019F62));

    display: block;

}

</style>

</head>

 

<body>

<div class="div1"></div>

</body>

</html>

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码