在知道原理后，想对控件美颜就是一件非常容易的事，大致有下面两种方式：
知道控件的实现原理后，美颜就变得非常简单了，找到对应的class，设置css样式，就轻松搞定，这完全就是css范畴的内容了，比如你可以做到下面这样：
代码只涉及css代码，如下：
.ol-zoom .ol-zoom-in {
background-color: #0000ff;
color: #ff0000;
}这段代码可以放在单独的css文件里面，也可以直接加载<head></head>里面，但必须是在ol.css引入之后加，这样才能覆盖ol3默认的css样式。 最简单粗暴的，莫过于直接在ol.css里面修改，但这样侵入性太强，不利于OpenLayers 3的版本升级，升级一次，就得自己修改一次。 所以不推荐。
其他控件的css样式修改同上，此处不再累述，请自行修改验证。
在前端除了css之外，还可以用强大的javascript代码进行修改，比如像下面这样，把最大化按钮的图标改变一下：
$('#map2 .ol-zoom-in').html('<>');
代码如下：
<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map2',
view: new ol.View({
center: ol.proj.transform(
[104, 30], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
// 设置放大按钮符号，下面这个代码需要引入jquery，或者zepto库
$('#map2 .ol-zoom-in').html('<>');
</script>使用javascript代码势必能更进一步定制各种控件。