css3综合实例修改样式,js改变div样式

如何运用CSS3把元素从一种样式变换为另一种样式

div class="box1"/div

style type="text/css"

    body{margin:0;padding:0}

    .box1{height:300px;width:300px;background:#3695d5;}

    .box1{/*过渡效果*/

    transition: width 2s;

    -moz-transition: width 2s; /* Firefox 4 */

    -webkit-transition: width 2s; /* Safari 和 Chrome */

    -o-transition: width 2s; /* Opera */

    }

    .box1:hover{background:#dcdcdc;height:400px;width:400px}/*使用伪类hover，鼠标悬浮选取元素，改变样式*/

/style

相关问答

Q1: 怎样设置CSS

css样式的原则是这样的，如果有多个元素（大于等于2个），并且需要设置有相同的样式，则可以把他们的class属性设置成一样的，统一进行设置，如果多个元素（大于等2），每个元素之间都没有共同的样式，则可以针对每个元素设置唯一的id属性，对这个唯一的id属性进行设置，就可以显示不同的效果，楼主这样的情况，可以选择对两个元素设置id属性，通过不同的id显示不同的样式效果，但是两个文本框如果有共同的属性也是可以设置class属性的，这个是不冲突的，如果回答的解决了您的问题，请采纳。

Q2: css3 用纯CSS实现获取元素的某个属性，并能改变样式

不可以，获取id 属性什么只能有js或jq实现，如果做响应式的可以用媒体查询 在不同的分辨率下 更换调整样式

Q3: 如何实现CSS3自定义滚动条样式

在chrome下可以自定义滚动条样式，举个例子

::-webkit-scrollbar

{

  width: 6px;

  height: 6px;

}

::-webkit-scrollbar-track-piece

{

  background-color: rgba(204, 204, 204, 0.66);

  -webkit-border-radius: 0px;

}

::-webkit-scrollbar-thumb

{

  border-radius: 6px;

  -webkit-border-radius: 6px;

  background-color: #7b7b7b;

}

/*定义横向和纵向交点的样式*/

::-webkit-scrollbar-corner { background-color: transparent; }

这里可以定义滚动条的粗细度和颜色等，至于更具体的诸如分别定义横竖滚动条样式等需要你自行修改。

另外也可以利用一些开源的滚动条插件来实现你需要的效果，比如我之前使用过的nicescroll.js，在浏览器兼容方面会好一些，但是可能会对系统的稳定性有影响，这个需要你权衡。

Q4: css3中的button样式怎么改

在一个id为bt1的按钮上设置样式，如下：

#bt1{

font-family:微软雅黑 ;    !-- 字体  --

width: 60px ;             !-- 宽度  --

height:30px ;             !-- 高度 --

font-size:14px;           !-- 字体大小--

color:gray;               !--字体颜色  --

border: 1px solid red； !-- 边框；边框宽度、单线、边框颜色 --

margin-left: 10px;            !-- 左边距，相应的还有右边距margin-right,                                      上margin-top,下 margin-buttom --

background-color:#F1F1F1;        !--背景色；十六位颜色表示时前加#符号  

                                  transparent是透明--

box-shadow:10px 10px 10px gray;  !-- 阴影；x轴偏移（右偏为正），y轴偏移（向下                                为正），模糊度，模糊颜色  --

border-radius:10px 10px 10px 10px;!-- 圆角；左上，右上，右下，左下--

cursor:pointer;                  !-- 鼠标经过时鼠标变成小手  --

}